Product Carousel Arrows in Brooklyn theme not working on Mobile - slick slider

Highlighted
New Member
4 0 0

Hey all,

I have added an product carousel slider to to a website I am working on - https://buddyandbone.com/

This displays on mobile only; however, on the preview, the arrows I set up are there (see attached), but when you are actually on mobile they do not show up. The client would like them to be there so customers understand that the carousel is there to be moved left / right.

Has anyone ever come across this (I used slick slider)?

It can't be media queries as it shows fine on laptop mobile preview.

 

Screenshot 2020-08-14 at 13.59.41.png

 

Any help is super appreciated

Thank you!

0 Likes
Highlighted
New Member
2 0 0

Hi, I'm trying to add a slider just like yours, could you provide the steps to achieve it? 
I would like to change the gird to a carousel in the mobile home page - frenchrose.com.br - password frenchrose123 
Thank you very much!

0 Likes
Highlighted

Looks to be working to me... This would imply that it's a device specific problem; what are you testing on?

0 Likes
Highlighted
New Member
4 0 0

This is what I can't understand - I'm testing on iPhone 11

0 Likes
Highlighted
New Member
4 0 0

Hello,

 

I followed this tutorial

 

https://www.youtube.com/watch?v=7DqtFl2KaSg

0 Likes
Highlighted
New Member
2 0 0

Thanks! I found this tutorial but since it was showing another theme I didn't think it would work, I'll try were =] And congrats your store is beautiful!

0 Likes

Hi again

I've had a wee dig into this and, logically, you're correct - the media query and/or css isn't the issue; my gut feeling, from a quick look at the javascript for the slider is that the arrows just aren't being added for iOS devices at all. Without a local build to debug with, and an iOS device connected to that, it might prove hard to find. The code looks to differentiate between touch and click ability.

The long and short of this being, you're going to have to find where it's being removed for iOS, and add your own javascript to add them back in... (unless you have the core of your site js to stop them being removed in the first place, but that's not a great idea and will lead to theme update hell).

Cheers,
Gary.

0 Likes
Highlighted

Scratch that - the creator's site (http://kenwheeler.github.io/slick/) indicates that it works just fine on iOS, so there's most likely a conflict with your theme code. Just tell the client it's a feature for iOS, and iOS users expect to swipe...

 

 

1 Like
Highlighted
New Member
4 0 0

Thank you

0 Likes