Slick Slider for fast creation of a responsive slider of any complexity on a website

#programming #javascript

Solution #1

<body>
  <a class="left" onclick="nextSlide(-1)">❮</a>  
  <a class="right" onclick="nextSlide(1)">❯</a>

  <div class="main__section">...</div>
</body>

var slide_index = 1;  
        displaySlides(slide_index);  
        function nextSlide(n) {  
            displaySlides(slide_index += n);  
        }  
        function currentSlide(n) {  
            displaySlides(slide_index = n);  
        }  
        function displaySlides(n) {  
            var i;  
            var slides = document.getElementsByClassName("main__section-img");  
            if (n > slides.length) { slide_index = 1 }  
            if (n < 1) { slide_index = slides.length }  
            for (i = 0; i < slides.length; i++) {  
                slides[i].style.display = "none";  
            }  
            slides[slide_index - 1].style.display = "block";
        }

Solution #2

let next = document.getElementById('next');
let prev = document.getElementById('prev');

let screenWidth  = window.innerWidth;

let isMobile = screenWidth < 420;

console.log(screenWidth);
$(document).ready(function(){
    $('.team-members').slick({
        dots: isMobile,
        infinite: true,
        speed: 300,
        slidesToShow: isMobile ? 1: 4,
        slidesToScroll: 1,
        nextArrow: next,
        prevArrow: prev,
      });
  });