Fullscreen Slider - Slide on Page Click on Touchscreen Devices (Workaround possible?)

[simon_k]

Hi Armin, Hi Marius,

thank you for putting in so much work into laytheme.

My title maybe isn't 100% accurate but it's the closed I could think of. Trying to explain my problem as structured as possible.

The overall-problem is that the website is not working on iPad in horizontal orientation the way i want. Partially I know why, but don't know if there is a solution or workaround.
On Desktop (Computers) its all fine, Mobile Version is ok too because i use a custom layout there where i substitute the fullscreen slider with the carousel addon instead.

A random example project page of my website demonstrating the different slide options is here:
http://www.simonkeckeisen.com/maylin-habig-performance

What I want is basically a browser filling fullscreen slider with the flexibility of adding background colors, showing images in different sizes (without faking it with photoshop) and a fixed caption + no transition while staying centered with a max height.

Decided for the fullscreen-slider for the desktop version.
For the Mobile Version Carousel is fine for me because i think then functionality is more important than a 100% representation of the desktop version.

What I did with the Fullscreen-Slider so far:
To have no transition on fullscreen slider i chose the Fading Option but with "0" Speed.
As long as I have the slider in horizontal and the slide on page click is on, double scrolling seems to be no problem. And on mobile its the mobile carousel page anyway.
For different sizes I coded an easy little CSS thing and just add classes to the images scaling the images. For the fixed captions I just type in everything manually in the gridder.

So everything seems to work perfect for me except for touchscreen devices in horizontal orientation. Then it chooses the desktop version where you can't click the images but only swipe. This results in extremely fast double skipping images because (of course) the animation speed is set to "0".

While i would find it strange to swipe when there is no slide animation in the first place I'm asking myself if there is any solution to be able to trigger the slideshow with a click on touchscreen to avoid this behaviour.

Like for example making an invisible fullscreen button that triggers the next slide.
If i would loose the option to go back in slides and just go forward, that would be fine for me.
Do you have any Idea what I could do?

It's really the only thing that's missing for me. Eventually I would also pay a programmer to add this functionality somehow but I don't know if it is technically possible in general.
Any ideas?

I also read that you currently work on an updated version of the carousel addon to work better in fullscreen. Do you think with this update things like fixed captions, individual background colors and individual sizes (+browser filling as the biggest option) per slide will be possible?
(Although it would be probably easier to give the fullscreen addon an update with a no transition and slide on page click on touchscreen solution...)

If yes, a temporary solution for me would be to set the mobile breakpoint so early that the mobile version is already active on a horizontal tablet size.

Thank you in advance!

[mariusjopen]

Hi @simon_k

so this is your main concern, right?

---

While i would find it strange to swipe when there is no slide animation in the first place I'm asking myself if there is any solution to be able to trigger the slideshow with a click on touchscreen to avoid this behaviour.

---

You can use the custom HTML code to create two invisible boxes which each a width of 50vw and a height of 100%.

Then you can use jQuery to activate the slide when you click on them.

This is a bit tricky and for sure only a workaround.
But this is the way I would go.

Maybe you can ask one of your coder-friends if he know how to do that.

Let me know if you have some thoughts about it.

All the best!

Marius

[simon_k]

Hey, thank you for your quick answer. If this works i'm super happy.

Can you tell me if the Fullscreen Slider is based on a specific jquery plugin like the carousel with flickity? Maybe I can try to do it myself first. If i know what to google and read a bit about the syntax and stuff i may get it to work.
Or maybe just the main command for triggering the next (unspecific) slide. All i could find on this forum was only the jquery commands for jumping to a specific slide like 1, 2, 3, etc..

That would help a lot.

Thank you!

[simon_k]

Managed to code it myself somehow. At least I'm like 70% there. :-)

It works except the slideshow isn't a loop yet. (jumping from last to first slide and the other way round)
Couldn't figure out how Callback functions work. But will probably ask a friend to help me with that if i don't get it.

Thanks :-)

[mariusjopen]

Hi @simon_k

great! Very happy to hear that you actually managed to do that!

Yesss!

:-D

Merry Christmas!

Marius