Slick Slider - 如何保持活动分页（点）始终居中
zxy*_*ynz 9 html javascript css jquery slick.js
我正在努力实现迄今为止我在网上还没有看到的东西。我希望光滑滑块中的活动分页点始终位于中心。
这是预期的结果：
换句话说，我希望页面加载显示第一张幻灯片，但第一张幻灯片的分页点应该居中。
如果用户通过滑动点击下一张幻灯片，则该点应再次移动中间，活动幻灯片始终位于分页中心。关于实现这一目标的最佳方法的任何想法？
这是我到目前为止所做的示例和代码。
$('.slider').slick({
infinite: true,
dots: true,
arrows: false
});.slider {
width: 200px;
}
.slide img {
display: block;
width: 100%;
height: auto;
}
.slick-dots {
display: flex;
justify-content: center;
margin: 0;
padding: 1rem 0;
list-style-type: none;
}
.slick-dots li {
margin: 0 0.25rem;
}
.slick-dots button {
display: block;
width: 1rem;
height: 1rem;
padding: 0;
border: none;
border-radius: 100%;
background-color: grey;
text-indent: -9999px;
}
.slick-dots li.slick-active button {
background-color: blue;
}<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<div class="slider">
<div class="slide">
<img src="http://placehold.it/200x100?text=1" />
</div>
<div class="slide">
<img src="http://placehold.it/200x100?text=2" />
</div>
<div class="slide">
<img src="http://placehold.it/200x100?text=3" />
</div>
<div class="slide">
<img src="http://placehold.it/200x100?text=4" />
</div>
<div class="slide">
<img src="http://placehold.it/200x100?text=5" />
</div>
</div>Kul*_*dia 10
为此，您必须根据我的代码片段再添加一个滑块，并使用滑块同步功能来绑定两个滑块。
这是一个工作示例
$(document).ready(function() {
$(".main_slider").slick({
infinite: true,
dots: false,
arrows: false,
asNavFor: '.slider_dots',
slidesToShow: 1,
slidesToScroll: 1,
});
$('.slider_dots').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.main_slider',
arrows: false,
dots: false,
centerMode: true,
focusOnSelect: true,
centerPadding: '20%',
});
});.main_slider,
.slider_dots {
width: 200px;
}
.slide img {
display: block;
width: 100%;
height: auto;
}
.slick-dots {
display: flex;
justify-content: center;
margin: 0;
padding: 1rem 0;
list-style-type: none;
}
.slick-dots li {
margin: 0 0.25rem;
}
.slick-dots button {
display: block;
width: 1rem;
height: 1rem;
padding: 0;
border: none;
border-radius: 100%;
background-color: grey;
text-indent: -9999px;
}
.slick-dots li.slick-active button {
background-color: blue;
}
.slider_dots .slider_navigators {
height: 20px;
background-color: #9E9E9E;
border-radius: 50%;
margin: 10px;
transform: scale(0.4);
outline: none;
cursor: pointer;
}
.slider_dots .slider_navigators.slick-active {
transform: scale(0.70);
}
.slider_navigators.slick-active.slick-current {
transform: scale(1);
background-color: #00f;
}<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>
<body>
<div class="main_slider">
<div class="slide">
<img src="https://via.placeholder.com/350x150" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/350x150" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/350x150" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/350x150" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/350x150" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/350x150" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/350x150" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/350x150" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/350x150" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/350x150" />
</div>
</div>
<div class="slider_dots">
<div class="slider_navigators"></div>
<div class="slider_navigators"></div>
<div class="slider_navigators"></div>
<div class="slider_navigators"></div>
<div class="slider_navigators"></div>
<div class="slider_navigators"></div>
<div class="slider_navigators"></div>
<div class="slider_navigators"></div>
<div class="slider_navigators"></div>
<div class="slider_navigators"></div>
</div>
</body>
</html>我希望你能从我的代码片段中得到你的解决方案。
.on('beforeChange', function(event, slick, currentSlide, nextSlide){
//appedn the bullet on center
});
像这样的东西