웹 사이트에서 복잡한 반응형 슬라이더를 빠르게 생성할 수 있는 Slick 슬라이더

7287 단어 javascriptprogramming

솔루션 #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";
        }


솔루션 #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,
      });
  });
자바스크립트 8 팁과 요령 자바스크립트를 적게 작성하는 방법 🙂
5분 안에 설명되는 JavaScript 콜백

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage