Skip to content

Instantly share code, notes, and snippets.

@galdiolo

galdiolo/slickGoTo.html

Created July 5, 2014 18:35
Show Gist options
  • Save galdiolo/4b73c81925f659320b5a to your computer and use it in GitHub Desktop.
Save galdiolo/4b73c81925f659320b5a to your computer and use it in GitHub Desktop.
Download ZIP
slickGoTo usage example (https://github.com/kenwheeler/slick)
Raw
slickGoTo.html
<!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>
@sepastian
Copy link

alexbfree, maybe this helps:

I ran into the same problem, because slick() has been invoked twice on my slider element. The data-slick attribute is used for passing options to slick; and $('#slick-div').slick() has been called in my JS code.

Apparenttly, if data-slick is present on an element, slick will take care of initializing that element - no need to call slick() explicitly. When I initialized the slider twice, it seemed to be working, but calling methods on it did not, for some strange reason.

Maybe that helps...

@panhwerwaseem
Copy link

@nekrozon thanks for your amazing help after a full day googling on this issue i found amazing solution which is provided by you very nice...

thanks man its work perfectly

cheers

@djm
Copy link

djm commented Jun 23, 2015

@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

@Fr4nks
Copy link

Fr4nks commented Jul 29, 2015

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");
});

@Fr4nks
Copy link

Fr4nks commented Jul 30, 2015

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");

@cryothic
Copy link

cryothic commented Nov 6, 2015

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?

@ibrent
Copy link

ibrent commented Dec 18, 2015

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);
    };

@eccentricpixel
Copy link

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();

@guytzhak
Copy link

The problem is when infinite set to true, When I change it to "false" its work well.

@j7u7l7s
Copy link

j7u7l7s commented Nov 20, 2017

Thank you for this, exactly what I needed 👍

@MIIIG
Copy link

MIIIG commented May 21, 2019 •
edited
Loading

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); }));

@SahilMepani
Copy link

Thanks, MIIG https://gist.github.com/galdiolo/4b73c81925f659320b5a#gistcomment-2922553

Your code saved me couple of hours.

@Alice11988
Copy link

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');
}));

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment