my slick slider in debut theme responsive is not working and the style of slider did not change.

Highlighted
New Member
1 0 0

$(document).ready(function() {  

 $('.row1').slick({
     mobileFirst:true,//add this one
  dots: true,
  infinite:true,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
  });
  

   

});

https://github.com/kenwheeler/slick/issues/1461

even i choose some style it did not work. only one style. i think it is default by the shopify 

0 Likes
Highlighted
Shopify Partner
221 1 23

Hey, 

Im having the same problem, Im now sure what the problem is, but upon some testing I updated the slick code on the vendor.js and the responsive property started working, but that update messed up the slideshow section. So Im thinking the slick version on Debut Theme does not have the responsive property or its not working. Where you able to solve that ? 

Cheers!

Entrepreneur, Developer, Geek, Gamer and very passionate about WEB development! :P

Need help with your Shopify Store? Contact me: jfeuchter@gmail.com :D
1 Like
Highlighted
Shopify Partner
10 0 3

I was having this same issue... here is how I resolved:

 

Shopify has the slick.min.js code in the vendor.js file. It is a bit outdated, however, and does not include the responsive feature. I simply commented that code out, downloaded a fresh Slick file from their website <https://github.com/kenwheeler/slick/archive/v1.8.1.zip>  and included the new/updated slick.js file in my theme's assets folder and linked to it from and included it in layout/theme.liquid like so: <script src="{{ 'slick.js' | asset_url }}" defer="defer"></script>. After that, the responsive feature was fully functional!

1 Like
Highlighted
New Member
2 0 1

Thank you !

0 Likes
Highlighted
New Member
2 0 1

@digital-vape wrote:

I was having this same issue... here is how I resolved:

 

Shopify has the slick.min.js code in the vendor.js file. It is a bit outdated, however, and does not include the responsive feature. I simply commented that code out, downloaded a fresh Slick file from their website <https://github.com/kenwheeler/slick/archive/v1.8.1.zip>  and included the new/updated slick.js file in my theme's assets folder and linked to it from and included it in layout/theme.liquid like so: <script src="{{ 'slick.js' | asset_url }}" defer="defer"></script>. After that, the responsive feature was fully functional!


This works for responsive but would cause errors for other scripts. after doing this - selecting a different variant of a product with different price does not update the price. 

If anyone is having the same problem what I did is I just placed the script <https://github.com/kenwheeler/slick/archive/v1.8.1.zip>  below the existing slick script in vendor.js. I dont think this is the best solution though.

1 Like
Highlighted
Shopify Partner
10 0 3

That's awesome thanks. I will try to come up with something better.

0 Likes
Highlighted
Tourist
5 0 0

 

jQuery(document).ready(function ($) {

Add jQuery here code.. if any issue hire me..

 

      });

0 Likes