Ad

How To Deactivate Slick Slider In Shopify

I have a Shopify Debut Theme store and I would like to deactivate the product Slick Slider Thumbnail when the page is viewed on mobile. My desktop/tablet version has a flat layout like this [Image], but it becomes weird and the format messes up when the slick slider is activated on mobile version [Image]. I have tried many ways to deactivate the Slick Slider, but nothing has worked, I just want the mobile version to have the same layout as the desktop/tablet one (flat layout), can anyone help me on this, thank you so much in advance!

Ad

Answer

This is simple, only you have to set in your slick options the width for reponsive where you want to disable the slider:

    $(".slider").slick({
          dots: false,
          infinite: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows:false,
          responsive:[
            {
              breakpoint: 676, //YOUR MOBILE WIDTH
              settings: "unslick" //DISABLE SLIDER
            }
          ]
    });
Ad
source: stackoverflow.com
Ad