CODEWITHSUNDEEP
jqueryslidershopifyslick.js
konrad
konrad

Reputation: 74

Slick.js slider on Shopify

I am struggling with Slick.js on Shopify.

I tested a slider on VisualCode on local server, and Slick works good.

But when I put the same code to Shopify, jQuery seems to not see this.

I've pasted all the CDN's and scripts.

The funny thing is, if I will paste the same Slick jQuery code on the Developer Tools > Console, then the Slick works.

This is simple code which works locally, but not on shopify:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> -->
</head>
<body>
    
    <div class="collection-slider">
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
      </div>
<style>
  .slick-prev, .slick-next{
    border: 2px solid green;

  }
    .collection-slider{
        width: 60%;
        margin: 0 auto;
        border: 1px solid black;
        background-color: gray;
    }
    .collection-slider div{
        margin: 5px;
        background-color: lightcyan;
        border:1px solid red;
    }
</style>
 <script>
$(document).ready(function(){
$('.collection-slider').slick({
  dots: false,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
});                 
    </script>
</body>
</html>

Can I have any suggestions please?

I am working on 'Expanse' theme.

Thank you

Upvotes: 0

Views: 2509

Answers (1)

Onkar
Onkar

Reputation: 2584

You need to try the setInterval to run the code after some time and check for the HTML elements on the page, once the HTML elements are found clear the Interval using clearInterval You also read more about these functions here setInterval, clearInterval

$(document).ready(function () {
    var found = setInterval(function(){
        if( $(".collection-slider").length ){
            clearInterval(found);
        }
        // slick slider code
        $(".collection-slider").slick({
            dots: !1,
            infinite: !1,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 4,
            responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        infinite: !0,
                        dots: !0
                    }
                }, {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                }, {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        })
        
    }, 200);
});

Upvotes: 2

Related Questions