Slick Slider - how to keep the active pagination (dot) always centered

问题

I am trying to achieve something which I haven't seen done so far on the web. I want the active pagination dot in the slick slider to always be in the center.

This is the expected result:

In other words I would expect the page to load showing the first slide but the pagination dot for the first slide should be centered.

If a user clicks the next slide by swiping then the dot should move the middle again, with the active slide always being centered in the pagination. Any ideas on the best way to achieve this?

Here's an example and code of what i've done so far.

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

回答1:

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

Something like this

Codepen

回答2:

for that you have to add one more slider as per my snippet and the use Slider Syncing functionality to bind both slider.

here is an working example for that

$(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="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 class="slide">
      <img src="http://placehold.it/200x100?text=6" />
    </div>
    <div class="slide">
      <img src="http://placehold.it/200x100?text=7" />
    </div>
    <div class="slide">
      <img src="http://placehold.it/200x100?text=8" />
    </div>
    <div class="slide">
      <img src="http://placehold.it/200x100?text=9" />
    </div>
    <div class="slide">
      <img src="http://placehold.it/200x100?text=10" />
    </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>

I hope you are getting your solution from my snippet code.

回答3:

If you need to achieve this properly, then you can try Abhishek Pandey solution.

If you just need to solve it quickly, then you can try shortcut approach like making the slider to start from slide 3 instead of slide 1

as your slider navigations are just dots with no numbers, site users doesn't going to recognize that slider is starting from slide 3

来源：https://stackoverflow.com/questions/52094348/slick-slider-how-to-keep-the-active-pagination-dot-always-centered

标签

javascript

jquery

html

css

slick