Skip to content

Instantly share code, notes, and snippets.

@jquimera

jquimera/slickGoTo.html

Forked from galdiolo/slickGoTo.html
Created January 10, 2020 15:16
Show Gist options
  • Save jquimera/3226333156c06719f176db2919377a51 to your computer and use it in GitHub Desktop.
Save jquimera/3226333156c06719f176db2919377a51 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment