рони,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-compat-git.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js">
</script>
<style type="text/css">
.how-top-paging__slide.active{
background-color:#FF0000;
}
span{
margin:8px;
}
</style>
<title>Slick variableWidth centerMode</title>
<script>
$(window).on("load", function() {
var slider = $(".how-slider");
slider.slick({
draggable: !1,
arrows: !1,
autoplay: !1
});
var dot = $(".how-top-paging__slide");
slider.on("beforeChange", function(event, slick, currentSlide, nextSlide) {
dot.removeClass("active").eq(nextSlide).addClass("active")
});
dot.on("click", function() {
var i = dot.index(this);
slider.slick("slickGoTo", i)
});
$(".how__prev-slide").on("click", function() {
slider.slick("slickPrev")
});
$(".how__next-slide").on("click", function() {
slider.slick("slickNext")
})
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
</script>
</head>
<body>
<div class="multiple-items">
<div class="how-top-paging__slide active" data-count="0">yourcontent</div>
<div class="how-top-paging__slide" data-count="1">your content</div>
<div class="how-top-paging__slide" data-count="2">your content</div>
<div class="how-top-paging__slide" data-count="3">yourcontent</div>
<div class="how-top-paging__slide" data-count="4">your content</div>
<div class="how-top-paging__slide" data-count="5">your content</div>
</div>
<div class="how-slider">
<div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/360x480&text=Slide+1"></div><!-- /.hotel-slider__slide -->
<div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/720x480&text=Slide+2"></div><!-- /.hotel-slider__slide -->
<div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/360x480&text=Slide+3"></div><!-- /.hotel-slider__slide -->
<div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/720x480&text=Slide+2"></div><!-- /.hotel-slider__slide -->
<div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/360x480&text=Slide+3"></div><!-- /.hotel-slider__slide -->
<div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/720x480&text=Slide+2"></div><!-- /.hotel-slider__slide -->
</div><!-- /.hotel-slider -->
<span class="how__prev-slide">prev</span><span class="how__next-slide">next</span>
</body>
</html>
Вроде работает, но как-то странно. Выделение выбранного слайда работает криво, не все выделяются. Перелистывание слайдов работает странно, пролетают как будто слайдов 10, хотя выбираю следующий слайд. Странно. Можешь помочь? Через кнопки next prev всё нормально листается.