Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

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

    Addons
    2
    5
    697
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      simon_k last edited by 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!

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        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

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • S
          simon_k last edited by

          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!

          1 Reply Last reply Reply Quote 0
          • S
            simon_k last edited by 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 :-)

            1 Reply Last reply Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              Hi @simon_k

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

              Yesss!

              :-D

              Merry Christmas!

              Marius

              www.mariusjopen.world

              1 Reply Last reply Reply Quote 0
              • First post
                Last post

              Before you post

              Use the Search Feature. Maybe there is already a solution to your issue.

              1. Update Lay Theme and all Lay Theme Addons
              2. Disable all Plugins
              3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
              4. Now see if your problem solved itself
              5. Go here, see if your problem is listed here:
              Troubleshooting

              When you post:
              1. Post a link to where the problem is
              2. If the problem is difficult to explain, post screenshots / link to a video to explain it

              Thanks!

              Online Users

              Recent Topics

              • T

                OpenType Feature

              • T

                Split Screen just on front page / subpages without the split?

              • T

                problem when I click on the category filter buttons on mobile

              • G

                z index has different behaviors on different pages

              laytheme.com