I'm using the Slick Carousel module in my D7 layout and it's awesome. My carousel view is currently set to Grid, and to display 9 slides at a time. That said, how can I set the view to display a different number of slides (at different sizes) when the site is being viewed from a mobile device? For example, if the browser is open on a phone and only 414px wide, I want to display 1 slide in the carousel instead of 9 slides with their current image style.

1 Answer 1


You need to enable the Slick UI, then press on configure.

enter image description here

Click on the List tab, and edit the default.

enter image description here

You need to add some breakpoints, make sure you select the correct skin.

enter image description here

  • Tried this just now - added the breakpoints 376px & 414px (widths of iPhone 6 and 6plus), but 9 slides still display on mobile?
    – Brittany
    Commented Jan 18, 2017 at 22:51
  • @Brittany did you select the correct skin? (top right of last pic, highlighted in green). Did you also clear the cache?
    – No Sssweat
    Commented Jan 18, 2017 at 22:52
  • Yes, correct skin selected and cache cleared.
    – Brittany
    Commented Jan 18, 2017 at 22:57
  • @Brittany I've never used this module before, I can't even the Slick Carousel to work. Perhaps you should give Owl Carousel a try. I've used this before. (same procedure, enable the UI and configure).
    – No Sssweat
    Commented Jan 18, 2017 at 23:09
  • @Brittany is your slick content coming from an image field in different nodes? or an image field with unlimited values form a single node?
    – No Sssweat
    Commented Jan 18, 2017 at 23:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.