<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Slick Slider Syncing example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="slider-for">
<div class="item">
<img src="http://www.planwallpaper.com/static/images/kartandtinki1_photo-wallpapers_02.jpg" alt="image" draggable="false"/>
</div>
<div class="item">
<img src="http://www.intrawallpaper.com/static/images/awesome-rain-wallpaper_0_PB7IVa9.jpg" alt="image" draggable="false"/>
</div>
<div class="item">
<img src="http://stylonica.com/wp-content/uploads/2014/02/Cute-Wallpaper-HD-Background.jpg" alt="image" draggable="false"/>
</div>
<div class="item">
<img src="http://files.vladstudio.com/joy/where_tahrs_live/wall/vladstudio_where_tahrs_live_800x600_signed.jpg" alt="image" draggable="false"/>
</div>
<div class="item">
<img src="http://www.download-free-wallpaper.com/img37/exygnglubgvdhhykjrcl.jpg" alt="image" draggable="false"/>
</div>
</div>
<div class="slider-nav">
<div class="item">
<img src="http://www.planwallpaper.com/static/images/kartandtinki1_photo-wallpapers_02.jpg" alt="image" draggable="false"/>
</div>
<div class="item">
<img src="http://www.intrawallpaper.com/static/images/awesome-rain-wallpaper_0_PB7IVa9.jpg" alt="image" draggable="false"/>
</div>
<div class="item">
<img src="http://stylonica.com/wp-content/uploads/2014/02/Cute-Wallpaper-HD-Background.jpg" alt="image" draggable="false"/>
</div>
<div class="item">
<img src="http://files.vladstudio.com/joy/where_tahrs_live/wall/vladstudio_where_tahrs_live_800x600_signed.jpg" alt="image" draggable="false"/>
</div>
<div class="item">
<img src="http://www.download-free-wallpaper.com/img37/exygnglubgvdhhykjrcl.jpg" alt="image" draggable="false"/>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/mahmoudzohdi/slick-slider-syncing-example-WrOJPv */
.slider-for{
width: 500px;
height: 250px;
margin: 30px auto 1px;
overflow: hidden;
}
img{
width: 100%;
min-height: 100%;
}
.slider-nav{
width: 500px;
height: 85px;
margin: auto;
}
.slider-nav .slick-track{
height: 85px;
}
.slick-arrow{
position: absolute;
top: 50%;
z-index: 50;
margin-top: -12px;
}
.slick-prev{
left: 0;
}
.slick-next{
right: 0;
}
/*Downloaded from https://www.codeseek.co/mahmoudzohdi/slick-slider-syncing-example-WrOJPv */
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav',
autoplay: true
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: true,
focusOnSelect: true
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Normalize
jQuery
v2.1.3
