iPhone Carousel Swipe issue

[alasdair17]

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

[mariusjopen]

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

Which iPhone dies your client use?

Best!

Marius

[alasdair17]

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

[mariusjopen]

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

[alasdair17]

Hi Marius,

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

https://helpfindmyneighbour.com/glasgow/

Thanks for taking a look!

Cheers,

Alasdair

[mariusjopen]

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

[alasdair17]

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

[alasdair17]

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

Thanks again guys!

[mariusjopen]

Dear @alasdair17

but now the clock is activated, right?

Best!

Marius

[alasdair17]

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

[arminunruh]

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

[arminunruh]

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

[alasdair17]

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

[mariusjopen]

Dear @alasdair17
can you post the code here?

Best!

Marius

[alasdair17]

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;
}

[mariusjopen]

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

Let us know :-)

Best!

Marius