Slick Slider - 如何保持活动分页（点）始终居中答案

【问题标题】：Slick Slider - how to keep the active pagination (dot) always centeredSlick Slider - 如何保持活动分页（点）始终居中
【发布时间】：2018-08-30 10:05:09
【问题描述】：

我正在努力实现迄今为止我在网络上从未见过的事情。我希望光滑滑块中的活动分页点始终位于中心。

这是预期的结果：

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

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

这是我到目前为止所做的示例和代码。

$('.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>

【问题讨论】：

你可以使用自定义事件beforeChange和àfterChange来启动一个css动画。动画长什么样，我不知道。但是您可以为当前位置添加一个类
如果你有偶数个元素怎么办？像 6 点还是 8 点？哪个点将处于活动状态？
@MuhammadOsama 总会有 5 个
我只是认为如果活动点始终位于中心，那么为什么不使用静态 HTML，因为什么都不会改变。这只是静态的:))

标签： javascript jquery html css slick.js

【解决方案1】：

为此，您必须根据我的 sn-p 添加一个滑块，并使用滑块同步功能来绑定两个滑块。

这是一个工作示例

$(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>

我希望你能从我的 sn-p 代码中得到你的解决方案。

【讨论】：

【解决方案2】：

.on('beforeChange', function(event, slick, currentSlide, nextSlide){
  //appedn the bullet on center 
});

类似的东西

Codepen

【讨论】：

这与预期的完全不同。

【解决方案3】：

这是一个使用一点 jQuery 来操作现有幻灯片点的样式的示例。可以在此处找到另一个工作代码示例：https://codepen.io/edlucas/pen/XWJRmbb

唯一需要注意的是，包含点的<li> 标记必须全部具有相同的宽度才能进行数学运算。此解决方案适用于单行中的任意数量的点。

const $slideShow = $('.slider');

function offsetDots(slideNum) {
  const $slickDots = $slideShow.find('.slick-dots'),
    numDots = $slickDots.find('li').length,
    dotWidth = $slickDots.find('li:first').outerWidth(true),
    offset = dotWidth * slideNum;
  
  // Offset the dots container to center current slide dot
  $slickDots.css('marginLeft', offset * -1 - Math.ceil(dotWidth / 2));
  
  // Clear existing secondary dot class
  $slickDots.find('li').removeClass('slick-secondary');

  // Add secondary dot class to preceeding slide dot
  if (slideNum > 0) {
    $slickDots.find('li:nth-of-type('+slideNum+')').addClass('slick-secondary');
  }

  // Add secondary dot class to next slide dot
  if (slideNum < numDots - 1) {
    $slickDots.find('li:nth-of-type('+(slideNum + 2)+')').addClass('slick-secondary');
  }
}

$slideShow.on('init', function(event, slick) {
  offsetDots(0);
});

$slideShow.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  offsetDots(nextSlide);
});

$slideShow.slick({
  infinite: true,
  dots: true,
  arrows: false
});

.demo-wrapper{
  width: 200px;
  position: relative;
}

.slide img {
  display: block;
  width: 100%;
  height: auto;
}

.slick-dots {
  position: absolute;
  left: 50%;
  display: inline-flex;
  margin: 0;
  padding: 1rem 0;
  list-style-type: none;
}

.slick-dots li {
  width: 12px;
  margin: 0 3px;
}

.slick-dots button {
  display: block;
  width: 6px;
  height: 6px;
  padding: 0;
  margin: 0 auto;
  border: none;
  border-radius: 100%;
  background-color: grey;
  text-indent: -9999px;
}

.slick-dots li.slick-active button {
  background-color: blue;
  width: 12px;
  height: 12px;
  margin-top:-4px
}

.slick-dots li.slick-secondary button {
  width: 8px;
  height: 8px;
  margin-top: -1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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="demo-wrapper">
<div class="slider">
  <div class="slide">
    <img src="https://loremflickr.com/200/200/lego?random=1" />
  </div>
  <div class="slide">
    <img src="https://loremflickr.com/200/200/lego?random=2" />
  </div>
  <div class="slide">
    <img src="https://loremflickr.com/200/200/lego?random=3" />
  </div>
  <div class="slide">
    <img src="https://loremflickr.com/200/200/lego?random=4" />
  </div>
  <div class="slide">
    <img src="https://loremflickr.com/200/200/lego?random=5" />
  </div>
</div>
</div>

【讨论】：

【解决方案4】：

如果您需要正确实现这一点，那么您可以尝试 Abhishek Pandey 解决方案。

如果您只是需要快速解决它，那么您可以尝试捷径，例如使滑块从幻灯片 3 而不是幻灯片 1 开始

由于您的滑块导航只是没有数字的点，因此网站用户不会识别出滑块是从幻灯片 3 开始的

【讨论】：