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>
@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