-
-
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> |
Did this to add an active state, any ideas on better solution?
$('.slideshow').on('setPosition', function(){
var currentSlide = $('.slideshow'').slick('slickCurrentSlide');
$(".menu a").removeClass("active");
$(".menumap a:nth-child("+currentSlide+")").addClass("active");
});
Combined everything into a function with some improvements. I'm not a coder so probably some mistakes.
function slickCustomNav(slickSlideShow, slideCustomNav) {
slickSlideShow = $(slickSlideShow);
slideCustomNav = $(slideCustomNav);
slideCustomNav.click(function (e) {
e.preventDefault();
slideIndex = $(this).index();
slickSlideShow.slick('slickGoTo', slideIndex);
});
slickSlideShow.on('setPosition', function () {
var currentSlide = slickSlideShow.slick('slickCurrentSlide');
slideCustomNav.removeClass("active");
slideCustomNav.filter(function (index) {
return index === currentSlide;
}).addClass("active");
});
}
slickCustomNav( ".slideshow", ".menu a");
I've got the "slickGoTo" working in 1.4, just as the documentation mentioned, except with one problem.
I want to skip a certain slide under some conditions. (something to do with a weird design-choise, ends up showing an empty slide on mobile).
So I use the "afterChange" event to check if every condition is met, and if so, I want to go back to slide 0.
But it looks like I can't go to another slide (slickNext, slickGoTo) within the event.
I have the following:
$(".project-slider").on("afterChange", function(event, slick, currentSlide) {
if ([certain conditions met...]) {
$(".project-slider").slick('slickGoTo', 0, true);
}
}
but that doesn't seem to work. Is it possible to do this at all?
I can't get it to work either. Both slickGoTo & setPosition don't respond when I put them in inside a condition.
I can set goto just fine when adding it to a click event, like a button goes to slide 4 for instance. But like if I am looking for something like what the last URL was and then I want to position to slide 3 instead of slide 0 on page load, i get nothing. No errors etc.
Anyone get setPosition to work?
var pieces = window.location.href.split("?");
if(pieces.length > 1) {
alert('yeah');
//$('.homeContent').slick("setPosition", 2);
$(".homeContent").slick('slickGoTo', 1, true);
};
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();
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');
}));
@clwill Bit late, but the documentation is slightly wrong.
For the method 'slickGoTo', the document for the 2nd parameter reads "boolean: should animate" when it actually should read "boolean: disable animation?" or similar.
As the default is to animate, just leave the 2nd parameter off.
src: kenwheeler/slick#850