CODEWITHSUNDEEP
javascriptjqueryshopifyslick.js
DevOverflow
DevOverflow

Reputation: 39

Shopify - Slick Slider / Carousel - Responsive setting not working

I am using Shopify (Debut theme), which comes with a version of the Slick carousel pre-installed.

Slick does work - however the responsive setting/feature does not. If I use the exact code that slick give as one of their demos for a simple example:

$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

None of the responsive features work. It only takes the initial slidesToShow value of 2. If you remove that then it defaults back to the slick default of 1. No window resizing/refreshing makes any difference, and my div container is the full width of my DOM/viewport so it is not being affected by a being in a small container, if that is relevant.

I have seen this issue being asked a lot on different forums with no real solution that I can find. I have attempted to update my version of Slick with no luck - but this could still be the issue and I may have not done so correctly.

Can anyone advise? Thanks in advance.

Upvotes: 3

Views: 7847

Answers (1)

DevOverflow
DevOverflow

Reputation: 39

I fixed it myself by doing the following:

  1. Commented out slick.min.js in the vendor.js file
  2. Downloaded latest slick (v1.8.1) https://kenwheeler.github.io/slick/
  3. Created a new file in Assets called "slick.js" and copied the slick.min.js file into it which i'd just downloaded
  4. Added the following below my vendor.js (but above theme.js) scripts in my theme.liquid
<script src="{{ 'slick.js' | asset_url }}" defer="defer"></script>

The responsive feature then worked.

Upvotes: 1

Related Questions