<!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>
</head>
<body>
<div class="how-top-paging">
<span class="how-top-paging__slide active" data-count="0">11</span><span class="how-top-paging__slide" data-count="1">22</span><span class="how-top-paging__slide" data-count="2">33</span>
</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><!-- /.hotel-slider -->
<span class="how__prev-slide">prev</span><span class="how__next-slide">next</span>
</body>
</html>