Slick Slider is breaking mobile site

Design help Animations & Interactions
1

Hello,

I’ve been reading all the slick slider post on the forum and I think this is a new one :slight_smile:

I use slick slider (followed all the instructions here) for text filled slides. I want to show 1 slide at a time.
I works fine on the desktop version but

  • the slider looks strange on mobile
  • and it seems to mess with webflow interactions. For instance: I have a ‘scroll into view’ interaction on the same page, above the slider. (so OUTSIDE of de slider) But these items don’t show properly on page load when on mobile. You just don’t see them. As soon as I hide the section with the slider on mobile, everything else works just fine.

Anybody else have experienced this?

I’ll tag some people who have been writing about the slick slider, hope that is okay:
@webdev
@Siton_Systems
@Noah-R
@jbleroux

Here is my public share link: https://preview.webflow.com/preview/heidihessing?utm_medium=preview_link&utm_source=designer&utm_content=heidihessing&preview=9d653aa1d51c25d553132e40f3c699f3&mode=preview
(how to access public share link)

Here is the published link:
https://heidihessing.webflow.io/

2

Hi. Do these tests:

  • test1: Move the slider to a “new” testing page and test on mobile (Working or not?)
    No working? go to …
  • test2: Remove interactions
    Not working…
  • test3: Remove all of your custom styles (From the slider)
    I guess there is a bug related to test3 (You added a lot of extra styles)

Your main page looks “broken” on chrome inspector (mobile) - so maybe the issue not related to slick:
Open the Chrome developer tools (F12), and then click the “Toggle the Device Toolbar” button (Ctrl+Shift+M).

image
image475×918 61 KB

Inner pages looks fine:

image
image458×969 173 KB

3

Hai,

I sorry for the late response and thank you for your help!
Test 1 and 2 I already did. But cleaning up the custom styling of the slider and the slides did the trick. Somehow this also fixed the broken interactions on the other parts of the page.

Never expected that, but great it worked :). Apparently when you do a lot of manual styling within the slick slider is messes up, not only the slider functionality on mobile, but also other webflow interactions??

4

What do you mean by that? The slide animation is quite clunky as it moves the image on our page

5

FYI: Slick Slider is no longer maintained and has over 1k open issues in GitHub. I recommend you find another alternative like https://splidejs.com/.

6

:frowning: oops i just stared adding it to my site

7

Hello PatLong,

I think I ment that the way I styled the slides (not necessarily animations) messed up the slider. To be honest I don’t remember exactly.

As @webdev said: slick slider is no longer supported.

I have been using: Swiper JS (https://swiperjs.com) for a while now. And I love it. The have good documentation and it works great on mobile. Let me know I you have questions about that one!