<!-- slick main -->
<div class="wrapper">
<div class="slider">
<div class="slider__slide">
<img src="http://wallpaperstock.net/tokyo-at-night_wallpapers_11055_1440x900.jpg" alt="image" class="slider__img" />
<div class="slider__text">
<h3 class="slider__heading">Slide 1</h3>
<p class="slider__descr">2 lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="slider__slide">
<img src="http://www.pixelstalk.net/wp-content/uploads/2016/08/Purple-Seascape-1440-x-900-Wallpaper.jpg" alt="image" class="slider__img" />
<div class="slider__text">
<h3 class="slider__heading">Slide 2</h3>
<p class="slider__descr">3 lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="slider__slide">
<img src="http://eskipaper.com/images/denver-wallpaper-2.jpg" alt="image" class="slider__img" />
<div class="slider__text">
<h3 class="slider__heading">Slide 3</h3>
<p class="slider__descr">6 lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<!-- slick thumbnails slider -->
<div class="thumbs">
<div class="thumbs__slide">
<img src="http://wallpaperstock.net/tokyo-at-night_wallpapers_11055_1440x900.jpg" alt="image" class="thumbs__img" />
</div>
<div class="thumbs__slide">
<img src="http://www.pixelstalk.net/wp-content/uploads/2016/08/Purple-Seascape-1440-x-900-Wallpaper.jpg" alt="image" class="thumbs__img" />
</div>
<div class="thumbs__slide">
<img src="http://eskipaper.com/images/denver-wallpaper-2.jpg" alt="image" class="thumbs__img" />
</div>
</div>
</div>
* {
box-sizing: border-box;
}
body {
min-width: 320px;
margin: 0;
background-color: #333;
}
img {
max-width: 100%;
height: auto;
}
.wrapper { // to set slider size
max-width: 800px;
margin: 0 auto;
// outline: 1px solid navy;
}
.slider {
&__slide {
position: relative;
}
&__img {
// height: 500px; // to fit
// width: 100%; // to fit
}
&__text {
position: absolute;
bottom: 0;
width: 100%;
padding: 20px 30px;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 0.8em;
text-align: center;
color: snow;
text-shadow: gold 0 0 10px;
background-color: rgba(0, 0, 0, 0.8);
@media screen and (min-width: 380px) {
font-size: 1em;
}
}
&__heading {
margin: 0;
margin-bottom: 10px;
}
&__descr {
margin: 0;
margin-bottom: 10px;
}
}
// slick
.slick-dotted.slick-slider {
margin-bottom: 0;
background: #000;
}
.slick-slide {
outline: 0;
}
.slick-current {
background-color: maroon;
}
.slick-arrow {
z-index: 1000;
&.slick-prev,
&.slick-next {
width: 40px;
height: 40px;
&:before {
font-size: 30px;
color: maroon;
}
}
&.slick-prev {
left: 20px;
}
&.slick-next {
right: 20px;
}
}
.slick-dots {
top: 10px;
bottom: auto;
li {
background: rgba(255, 255, 255, 0.3);
border-radius: 50px;
button {
&:before {
}
}
}
.slick-active { //active li
background: maroon;
}
}
.thumbs {
.slick-track {
background-color: black;
}
&__slide {
padding: 10px;
}
}
View Compiled
$(document).ready(function() {
var $window = $(window),
$slider = $('.slider'),
$thumbSlider = $('.thumbs');
$slider.slick({
autoplay: true,
autoplaySpeed: 3000,
dots: true,
speed: 1000,
pauseOnDotsHover: true,
arrows: true,
asNavFor: '.thumbs',
// focusOnSelect: true,
// swipeToSlide: true,
// vertical: true,
// rows: 2,
// slidesPerRow: 1,
// centerMode: true,
// centerPadding: '20px',
// fade: true
});
// slick thumbnails
$thumbSlider.slick({
mobileFirst: true,
// скрыть
slidesToShow: 3,
slidesToScroll: 1,
//
asNavFor: '.slider',
centerMode: true,
centerPadding: '20px',
focusOnSelect: true,
arrows: false,
dots: false,
swipe: false,
responsive: [
{
breakpoint: 560,
settings: {
mobileFirst: true,
slidesToShow: 5,
}
}
]
});
// hide or show thumbnail slider according to window size
$window.on('resize', function() {
($window.width() < 420) ?
$thumbSlider.hide() :
$thumbSlider.show();
});
});