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