-
-
Save galdiolo/4b73c81925f659320b5a to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Example</title> | |
| <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css"/> | |
| <style> | |
| .menu { | |
| text-align: center; | |
| } | |
| .container { | |
| width: 400px; | |
| margin:1em auto; | |
| } | |
| .slick-prev:before, .slick-next:before { | |
| color: gray ! important; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="menu"> | |
| <a href="#">Img 1</a> | |
| <a href="#">Img 2</a> | |
| <a href="#">Img 3</a> | |
| <a href="#">Img 4</a> | |
| <a href="#">Img 5</a> | |
| <a href="#">Img 6</a> | |
| <a href="#">Img 7</a> | |
| <a href="#">Img 8</a> | |
| <a href="#">Img 9</a> | |
| <a href="#">Img 10</a> | |
| </div> | |
| <div class="container"> | |
| <div class="slideshow"> | |
| <div><img src="http://lorempixel.com/400/200/nature/IMAGE-01/"></div> | |
| <div><img src="http://lorempixel.com/400/200/nature/IMAGE-02/"></div> | |
| <div><img src="http://lorempixel.com/400/200/nature/IMAGE-03/"></div> | |
| <div><img src="http://lorempixel.com/400/200/nature/IMAGE-04/"></div> | |
| <div><img src="http://lorempixel.com/400/200/nature/IMAGE-05/"></div> | |
| <div><img src="http://lorempixel.com/400/200/nature/IMAGE-06/"></div> | |
| <div><img src="http://lorempixel.com/400/200/nature/IMAGE-07/"></div> | |
| <div><img src="http://lorempixel.com/400/200/nature/IMAGE-08/"></div> | |
| <div><img src="http://lorempixel.com/400/200/nature/IMAGE-09/"></div> | |
| <div><img src="http://lorempixel.com/400/200/nature/IMAGE-10/"></div> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
| <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"/></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| $(".slideshow").slick({ | |
| dots: true | |
| }); | |
| $(".menu a").click(function(e){ | |
| e.preventDefault(); | |
| slideIndex = $(this).index(); | |
| $( '.slideshow' ).slickGoTo( parseInt(slideIndex) ); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
The problem is when infinite set to true, When I change it to "false" its work well.
Thank you for this, exactly what I needed 👍
my slick is 1.8.1 working on jquery 3.4.1
my code
$(".project__slider_nav-item").on("click", (function(e){ e.preventDefault(); var slideIndex = $(this).index(); //console.log(slideIndex); $( '.project__slider_for' ).slick('slickGoTo', slideIndex, false); }));
Thanks, MIIG https://gist.github.com/galdiolo/4b73c81925f659320b5a#gistcomment-2922553
Your code saved me couple of hours.
Hello, i'm creating a quiz with slick slider. I would like go to next slide only when one of the four button (of quiz choices) is clicked, without side arrows and dots below. Can someone help me? Thank you...
I did some work like this...
$("#Domanda1 .btn").on("click", (function(e){
var currentSlide = $(this).slick('slickCurrentSlide');
$(this).slick('slickNext');
}));
You need to declare the listener BEFORE you setup slick. Then you are good to go.
var feed = $('#yourElement'); $(".yourTrigger").click(function(e){ e.preventDefault(); slideIndex = $(this).attr('data-text'); feed.slick('slickGoTo', slideIndex, true ); }); feed.slick();