Lay Theme Forum

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

    iPhone Carousel Swipe issue

    Bug Reports
    3
    16
    609
    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.
    • A
      alasdair17 last edited by

      Hi guys,

      I am having a slight issue with my carousel on iPhones, particularly the Safari app, all other phones work fine. When I try to swipe on the carousel to go to the next image it sticks/stutters and sometime's won't swipe at all.

      I wondered if there was a fix for this? I'd really appreciate some guidance on the issue.

      Here is a link to a page on the website with a carousel:

      https://helpfindmyneighbour.com/glasgow

      For those with iPhones, does it swipe okay for you or is it just my client's iPhone? It works absolutely fine on my Samsung.

      Cheers,

      Alasdair

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

        Dear @alasdair17
        on my iPhone 6 Safari the Slideshow works without a problem.

        Which iPhone dies your client use?

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • A
          alasdair17 last edited by

          Hi Marius,

          Thanks for getting back so quickly!

          I changed it to 'no transition' a few hours ago which works fine on iPhones as it means you can tap between images.

          I've reverted it back to swipe, if you could try again on your iPhone please. I tested it on a few of my friend's iPhones and it definitely has a sticking issue where it struggles to swipe between images. I dunno if it's a Safari issue.

          My client is happy with it being a tapping transition but I think a swipe would be a more natural choice for smartphone users.

          Thanks again for your help,

          Cheers,

          Alasdair

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

            Dear @alasdair17
            can you activate the slide and let me know when it is active? Then I will have a look with Armin about it.

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • A
              alasdair17 last edited by

              Hi Marius,

              How do you mean? It is currently active with slide transition.

              https://helpfindmyneighbour.com/glasgow/

              Thanks for taking a look!

              Cheers,

              Alasdair

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

                Dear @alasdair17
                ok. I understand. On my phone the sliding of the images behaves very fluently.
                Which iPhone and which browser are affected?

                We will look into this.

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • A
                  alasdair17 last edited by

                  Hi Marius,

                  It's an iPhone 8 on Safari.

                  Here's a screen recording of it happening on my friend's iPhone 8:

                  https://sendvid.com/b5wsgfwn

                  Hope that makes more sense!

                  Cheers,

                  Alasdair

                  1 Reply Last reply Reply Quote 0
                  • A
                    alasdair17 last edited by

                    The screen recording I posted above is actually an iPhone Xs - sorry.

                    Thanks again guys!

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

                      Dear @alasdair17

                      but now the clock is activated, right?

                      Best!

                      Marius

                      www.mariusjopen.world

                      1 Reply Last reply Reply Quote 0
                      • A
                        alasdair17 last edited by

                        Hi Marius,

                        Sorry, this website is for a client and he visited today and wanted to see the tap 'no transition' function so you must have viewed it when the swipe wasn't activated!

                        He is happy to go with the tap 'no transition' function though so no worries!

                        I think it is something to do with the way people swipe through the images. If you steady your thumb and swipe straight it works fine but if you try and swipe diagonally or too quickly it disrupts the functionality and what happens is what I showed in the video above.

                        I think the issue is something out of Lay Theme's hands as you can't program how people swipe on their devices haha! 100% works fine on Samsung though regardless of how you quick or direction you swipe though.

                        Thanks again,

                        Cheers,

                        Alasdair

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

                          Thanks a lot for your feedback, i will see what I can do.

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

                            Ok please update your carousel plugin. I think now it should work better!

                            1 Reply Last reply Reply Quote 1
                            • A
                              alasdair17 last edited by

                              Thanks @arminunruh that definitely helped improve the responsiveness on the carousel!

                              I've just run into another iPhone Safari issue and I wondered if yourself or @mariusjopen could take a look?

                              On our website https://creativerain.co.uk/, on our homepage we have coded in a feature that when you click/tap anywhere on the page our work appears. We built it using jquery. It works absolutely fine on every platform apart from Safari iPhone.

                              We've looked over the Lay Theme documentation but still not too sure.

                              It's strange because Safari Desktop works fine, just iPhones.

                              Any help would be hugely appreciated.

                              Thank you,

                              Alasdair

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

                                Dear @alasdair17
                                can you post the code here?

                                Best!

                                Marius

                                www.mariusjopen.world

                                1 Reply Last reply Reply Quote 0
                                • A
                                  alasdair17 last edited by

                                  Yes, of course, thanks @mariusjopen

                                  Here you go:

                                  <script>
                                  var mouseX, mouseY;

                                  var l1 = 0;
                                  var l2 = 0;

                                  var images = [];

                                  images[0] = "https://creativerain.co.uk/wp-content/uploads/2018/11/on_the_same_latitude_01.jpg";
                                  images[1] = "https://creativerain.co.uk/wp-content/uploads/2018/11/on_the_same_latitude_04.jpg";
                                  images[2] = "https://creativerain.co.uk/wp-content/uploads/2018/10/on_the_same_latitude_06.jpg";
                                  images[3] = "https://creativerain.co.uk/wp-content/uploads/2018/11/on_the_same_latitude_02.jpg";
                                  images[4] = "https://creativerain.co.uk/wp-content/uploads/2018/11/creative_rain_the_art_of_making_20.jpg";
                                  images[5] = "https://creativerain.co.uk/wp-content/uploads/2018/11/creative_rain_the_art_of_making_06.jpg";
                                  images[6] = "https://creativerain.co.uk/wp-content/uploads/2018/11/creative_rain_the_art_of_making_08.jpg";
                                  images[7] = "https://creativerain.co.uk/wp-content/uploads/2018/11/creative_rain_the_art_of_making_09.jpg";
                                  images[8] = "https://creativerain.co.uk/wp-content/uploads/2018/11/creative_rain_the_art_of_making_11.jpg";
                                  images[9] = "https://creativerain.co.uk/wp-content/uploads/2018/11/creative_rain_the_art_of_making_01.jpg";
                                  images[10] = "https://creativerain.co.uk/wp-content/uploads/2018/11/focasnew_07.jpg";
                                  images[11] = "https://creativerain.co.uk/wp-content/uploads/2018/11/focasnew_08.jpg";
                                  images[12] = "https://creativerain.co.uk/wp-content/uploads/2018/11/focasnew_03.jpg";
                                  images[13] = "https://creativerain.co.uk/wp-content/uploads/2018/11/focasnew_04.jpg";
                                  images[14] = "https://creativerain.co.uk/wp-content/uploads/2018/11/wildfires_front.jpg";
                                  images[15] = "https://creativerain.co.uk/wp-content/uploads/2018/11/wildfires_back.jpg";
                                  images[16] = "https://creativerain.co.uk/wp-content/uploads/2018/11/wildlfires_miriam.jpg";
                                  images[17] = "https://creativerain.co.uk/wp-content/uploads/2018/11/wildfires_sophie.jpg";
                                  images[18] = "https://creativerain.co.uk/wp-content/uploads/2018/11/wildfires_nina.jpg";
                                  images[19] = "https://creativerain.co.uk/wp-content/uploads/2019/02/beautiful_materials_creative_rain_02.jpg";
                                  images[20] = "https://creativerain.co.uk/wp-content/uploads/2019/02/beautiful_materials_creative_rain_01.jpg";
                                  images[21] = "https://creativerain.co.uk/wp-content/uploads/2019/02/beautiful_materials_creative_rain_03.jpg";

                                  jQuery(document).on("mousemove", "#clickable-area", function(e){
                                  mouseX = e.pageX;
                                  mouseY = e.pageY;
                                  });

                                  jQuery(document).on("click", "#clickable-area", function(e){
                                  if(l1 == images.length){
                                  l1 = 0;
                                  }
                                  createImage();
                                  });

                                  function createImage(){
                                  jQuery("<img class='absolute' id='img-"+l1+l2+"' src='"+images[l1]+"' alt='' />").appendTo("#clickable-area");
                                  jQuery("#img-"+l1+l2).css({
                                  "left" : mouseX / 2,
                                  "top" : mouseY / 2
                                  });
                                  fadeOut(l1, l2);
                                  l1 += 1;
                                  l2 += 1;
                                  }

                                  function fadeOut(l1, l2){
                                  setTimeout(function(){
                                  jQuery("#img-"+l1+l2).fadeOut(500, function(){ jQuery(this).remove(); });
                                  },2500);
                                  }
                                  </script>

                                  #clickable-area .absolute{
                                  position: absolute;
                                  width:50%;
                                  height: auto;
                                  }

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

                                    Dear @alasdair17
                                    I would set a couple of console.logs to see where the code stops working.

                                    Let us know :-)

                                    Best!

                                    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

                                    F
                                    A
                                    G
                                    D
                                    S
                                    M

                                    Recent Topics

                                    • K

                                      Unable to update lay theme / to login wp admin

                                    • S

                                      Theme crashed - because of Polylang?

                                    • A

                                      New button feature not available

                                    • A

                                      carousel addon not working after update

                                    laytheme.com