An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
August 9, 2022 04:53 pm GMT
Original Link: https://dev.to/hannaha88/slick-slider-for-fast-creation-of-a-responsive-slider-of-any-complexity-on-a-website-27po
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>
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, }); });
Original Link: https://dev.to/hannaha88/slick-slider-for-fast-creation-of-a-responsive-slider-of-any-complexity-on-a-website-27po
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To