Javascript 滑动条-如何保持活动分页（点）始终居中

我正在努力实现一些迄今为止在网络上还没有实现的目标。我希望平滑滑块中的活动分页点始终位于中心

这是预期的结果：

换句话说，我希望加载的页面显示第一张幻灯片，但是第一张幻灯片的分页点应该居中

如果用户通过滑动单击下一张幻灯片，则点应再次移动到中间，活动幻灯片始终位于分页的中心。关于实现这一目标的最佳方法有什么想法

下面是我到目前为止所做工作的示例和代码

$（'.slider'）。光滑({
无限：是的，
点：是的，
箭头：假
});
滑块{
宽度：200px；
}
.幻灯片图像{
显示：块；
宽度：100%；
高度：自动；
}
.圆点{
显示器：flex；
证明内容：中心；
保证金：0；
填充：1rem0；
列表样式类型：无；
}
.圆点李{
保证金：0.25雷姆；
}
.圆点按钮{
显示：块；
宽度：1em；
高度：1公厘；
填充：0；
边界：无；
边界半径：100%；
背景颜色：灰色；
文本缩进：-9999px；
}
.slick dots li.slick-active按钮{
背景颜色：蓝色；
}


像这样的

为此，您必须根据我的代码片段添加一个滑块，并使用滑块同步功能绑定两个滑块

下面是一个有效的例子


$（文档）.ready（函数（）{
$（“.main_滑块”）.光滑({
无限：是的，
点：错，
箭头：错，
asNavFor:'.slider_dots'，
幻灯片放映：1，
幻灯片滚动：1，
});
$（'.slider_dots'）。光滑({
无限：是的，
幻灯片放映：3，
幻灯片滚动：1，
asNavFor:“.main_滑块”，
箭头：错，
点：错，
centerMode：对，
焦点选择：正确，
中心填充：“20%”，
});
});
.main\u滑块，
.圆点{
宽度：200px；
}
.幻灯片图像{
显示：块；
宽度：100%；
高度：自动；
}
.圆点{
显示器：flex；
证明内容：中心；
保证金：0；
填充：1rem0；
列表样式类型：无；
}
.圆点李{
保证金：0.25雷姆；
}
.圆点按钮{
显示：块；
宽度：1em；
高度：1公厘；
填充：0；
边界：无；
边界半径：100%；
背景颜色：灰色；
文本缩进：-9999px；
}
.slick dots li.slick-active按钮{
背景颜色：蓝色；
}
.滑块\点.滑块\导航器{
高度：20px；
背景色：#9E9E9E；
边界半径：50%；
利润率：10px；
变换：比例（0.4）；
大纲：无；
光标：指针；
}
.slider_dots.slider_navigators.slick-active{
变换：比例（0.70）；
}
.slider_navigators.slick-active.slick-current{
变换：比例（1）；
背景色：#00f；
}

演示页
如果您需要正确地实现这一点，那么您可以尝试阿披实潘迪解决方案

如果你只需要快速解决它，那么你可以尝试像这样的快捷方式
使滑块从幻灯片3开始，而不是从幻灯片1开始

由于您的滑块导航只是没有数字的点，站点用户不会意识到滑块是从幻灯片3开始的。下面是一个使用jQuery操作现有幻灯片点样式的示例。可在此处找到工作代码的另一个示例：

唯一需要注意的是，包含点的
标记必须具有相同的宽度才能计算出数学结果。此解决方案适用于单行中任意数量的点


const$slideShow=$（'.slider'）；
函数偏移点（slideNum）{
const$slickDots=$slideShow.find（“.slickDots”），
numDots=$slickDots.find（'li'）。长度，
dotWidth=$slickDots.find（'li:first'）。outerWidth（true），
偏移量=点宽度*滑动枚举；
//将“点”容器偏移到当前幻灯片点的中心
$slickDots.css（'marginLeft'，offset*-1-Math.ceil（dotWidth/2））；
//清除现有的辅助点类
$slickDots.find（'li'）.removeClass（'slick-secondary'）；
//将辅助点类添加到之前的幻灯片点
如果（slideNum>0）{
$slickDots.find（'li:n类型（'+slideNum+'））.addClass（'slick-secondary'）；
}
//将辅助点类添加到下一个幻灯片点
if（slideNum
.demo包装器{
宽度：200px；
位置：相对位置；
}
.幻灯片图像{
显示：块；
宽度：100%；
高度：自动；
}
.圆点{
位置：绝对位置；
左：50%；
显示：内联flex；
保证金：0；
填充：1rem0；
列表样式类型：无；
}
.圆点李{
宽度：12px；
利润率：0.3倍；
}
.圆点按钮{
显示：块；
宽度：6px；
高度：6px；
填充：0；
保证金：0自动；
边界：无；
边界半径：100%；
背景颜色：灰色；
文本缩进：-9999px；
}
.slick dots li.slick-active按钮{
背景颜色：蓝色；
宽度：12px；
高度：12px；
利润上限：-4px
}
.光滑圆点li.光滑辅助按钮{
宽度：8px；
高度：8px；
页边顶部：-1px；
}

您可以使用自定义事件
在更改之前
和
在更改之后
来启动css动画。动画看起来怎么样，我不知道。但是你可以为当前位置添加一个类如果你有偶数个e怎么办
.on('beforeChange', function(event, slick, currentSlide, nextSlide){
  //appedn the bullet on center 
});