DEV Community 👩‍💻👨‍💻

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

Posted on

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

Solution #1

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

  <div class="main__section">...</div>
</body>
Enter fullscreen mode Exit fullscreen mode
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";
        }
Enter fullscreen mode Exit fullscreen mode

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,
      });
  });
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
crisoncode profile image
Cristian Estarlich

Sorry but slick slider for me is obsoleted I always recommend swiper:
swiperjs.com/

The API is the best one that I saw in a slider plugin and the community in GitHub is really awesome

Collapse
 
hannaha88 profile image
hannaA Author

Cool, thank you

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.