Created
May 6, 2020 11:32
-
-
Save Korveld/8006388eadb7db12e017af6ea1b711a1 to your computer and use it in GitHub Desktop.
slickGoTo usage example (https://github.com/kenwheeler/slick)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>slickGoTo usage example</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> | |
| <link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"> | |
| <style> | |
| .slider img { | |
| margin: 0 auto; | |
| } | |
| .slider-nav { | |
| margin-bottom: 40px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="slider-nav d-flex"> | |
| <a href="#" id="slide1" class="list-group-item list-group-item-action active">Slide1 nav</a> | |
| <a href="#" id="slide2" class="list-group-item list-group-item-action">Slide2 nav</a> | |
| <a href="#" id="slide3" class="list-group-item list-group-item-action">Slide3 nav</a> | |
| </div> | |
| <div class="slider w-100"> | |
| <div><img src="http://via.placeholder.com/725x300" alt=""></div> | |
| <div><img src="http://via.placeholder.com/725x300" alt=""></div> | |
| <div><img src="http://via.placeholder.com/725x300" alt=""></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> | |
| <script type="text/javascript"> | |
| var slider = $('.slider') | |
| slider.slick({ | |
| dots: true, | |
| arrows: false, | |
| infinite: false, | |
| slidesToShow: 1, | |
| slidesToScroll: 1, | |
| autoplay: false, | |
| }); | |
| slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){ | |
| $('.slider-nav a').removeClass('active') | |
| var nextSlide = nextSlide + 1 | |
| $('#slide' + nextSlide).addClass('active') | |
| }); | |
| $('.slider-nav a').click(function(e) { | |
| e.preventDefault() | |
| var slideIndex = $(this).index() | |
| slider.slick('slickGoTo', parseInt(slideIndex)) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment