Skip to content

Instantly share code, notes, and snippets.

@galdiolo

galdiolo/slickGoTo.html

Created July 5, 2014 18:35
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • 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>
@doublejess
Copy link

Thanks for the example, it's exactly what I need. However, there is a problem with the first image. The index is -1. How can I change it? Everything else works well.

@davidensinger
Copy link

I have the same issue as @doublejess. Anyone have a solution?

I just realized that this has been fixed with this commit. It hasn’t been merged into the minified dist for the plugin, but is in the unminified version. See here

@adam2k
Copy link

adam2k commented Jan 29, 2015

Thanks @davidensinger! Your comment saved me a bunch of time.

@sethxd
Copy link

sethxd commented Feb 6, 2015

Hmm, I'm having trouble with this. Code looks like:

<script type="text/javascript">
      $(document).ready(function(){

        $('.rps-slider').slick({
          infinite: true,
          arrows: true,
        });

        $(".slick-nav li a").click(function(e){
          e.preventDefault();
          slideIndex = $(this).index();
          $( '.rps-slider' ).slickGoTo( parseInt(slideIndex) );
        });

      });



    </script>

I'm getting the error: Uncaught TypeError: undefined is not a function on the line calling slickGoTo

@alexbfree
Copy link

I have the same issue as @sethxd. Seems like the function isn't properly in scope or declared correctly? I am using slick 1.4.1

@Martn-
Copy link

Martn- commented Feb 10, 2015

var slider = $( '.rps-slider' );
slider[0].slick.slickGoTo(parseInt(actIndex));

// Is a little bit dirty but it worked for me. For the path you need to look in the dom.

@nekrozon
Copy link

Martn-

THANK YOU!!!

After HOURS of googling the forums i finally came across the correct way to use slickGoTo... finally it works!!!!!

THANKS SO MUCH!

@nekrozon
Copy link

In case you want to see the code that ended up working for me.

                    //Bind to click event to change active slide (slider-for) whenever a slide is click in slider-nav
        $( '.slider-nav' ).on("click", ".slick-slide", function () {
                    //Get the data-slick-index property so we know what slide to switch to
            actIndex = $(this).attr('data-slick-index');
                     //Select the .slider-for dom elements and put into a variable (only one for me)
            var slider = $( '.slider-for' );
                    //Send the .slider-nav to the slide that was clicked
            slider[0].slick.slickGoTo(parseInt(actIndex));              
        });

@jlyman
Copy link

jlyman commented Mar 19, 2015

FYI, in version 1.4+ it looks like the call can also be made like this:

$('.your-slide-el').slick('slickGoTo', slideIndex, true);

@clwill
Copy link

clwill commented Mar 28, 2015

Struggled for hours with this. The only thing that worked correctly was nekrozon's trick of using .attr('data-slick-index'). And the v1.4 version that jlyman shows. Thanks to both.

Now, anyone know why the "animate" parameter doesn't seem to have any effect, true or false?

@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

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