Slick Slider Syncing example

In this example below you will see how to do a Slick Slider Syncing example with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mahmoudzohdi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mahmoudzohdi ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!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

});

Comments