Sliders do not connect

Styles

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.xx/css/swiper.min.css"> <link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />

Scripts

 <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.your-class').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, }); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.xx/js/swiper.js"></script> <script> var swiper = new Swiper('.swiper-container', { slidesPerView: 3, spaceBetween: 30, pagination: { el: '.swiper-pagination', clickable: true, }, }); </script>

Console screenshot

    1 answer 1

    You are not connected to the Swiper Slider. You did not specify a version. Also check if jQuery is connected.

    There is a line in the Swiper documentation

    Don't forget to change 4.xx to actual Swiper version

    Apparently you did not pay attention to this.

    Paste this code and it will work.

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

    Also, you have not selected a container for initializing Slick Slider.

    Replace $('.your-class') with your div with the class where you want to see Slick Slider.

    And here you can see demos for Swiper Slider link

    On the Source Code link you will find an example of using a slider.