sergey24,
<!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
});
$(".multiple-items").slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
var dot = $(".multiple-items .how-top-paging__slide");
slider.on("beforeChange", function(event, slick, currentSlide, nextSlide) {
dot.removeClass("active").filter("[data-count='" + nextSlide + "']").addClass("active")
});
dot.on("click", function() {
var i = $(this).data("count");
slider.slick("slickGoTo", i)
});
$(".how__prev-slide").on("click",
function() {
slider.slick("slickPrev")
});
$(".how__next-slide").on("click", function() {
slider.slick("slickNext")
})
});
</script>
</head>
<body>
<div class="multiple-items">
<div class="how-top-paging__slide active" data-count="0">yourcontent0</div>
<div class="how-top-paging__slide" data-count="1">your content1</div>
<div class="how-top-paging__slide" data-count="2">your content2</div>
<div class="how-top-paging__slide" data-count="3">yourcontent3</div>
<div class="how-top-paging__slide" data-count="4">your content4</div>
<div class="how-top-paging__slide" data-count="5">your content5</div>
</div>
<div class="how-slider">
<div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/360x480&text=Slide+1">0</div><!-- /.hotel-slider__slide -->
<div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/720x480&text=Slide+2">1</div><!-- /.hotel-slider__slide -->
<div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/360x480&text=Slide+3">2</div><!-- /.hotel-slider__slide -->
<div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/720x480&text=Slide+2">3</div><!-- /.hotel-slider__slide -->
<div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/360x480&text=Slide+3">4</div><!-- /.hotel-slider__slide -->
<div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/720x480&text=Slide+2">5</div><!-- /.hotel-slider__slide -->
</div><!-- /.hotel-slider -->
<span class="how__prev-slide">prev</span><span class="how__next-slide">next</span>
</body>
</html>