Slick slider custom dots inside bootstrap columns

问题

I have 6 bootstrap columns that contain a short description for each slick slide. Is it possible to replace the default slick slider dots with these columns? The most important part is that I want to keep the existent layout and not having them all inline like the default dots.

jsfiddle demo

As an example, when the slide 4 is active ( autoplay: true ), column 4 will have a red background color. If slide 5 is active, column 5 will have a red background and so on.

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"></script>
        
        <div id="carousel" class="slider">
          <div class="slider-item">1</div>
          <div class="slider-item">2</div>
          <div class="slider-item">3</div>
          <div class="slider-item">4</div>
          <div class="slider-item">5</div>
          <div class="slider-item">6</div>
        </div>
        
        <div class="container">
          <div class="extra-dots-box row">
            <div class="dot-1 col-md-4 col-lg-4">
              <div class="extra-dot">        
                <h3>Custom Title</h3>
                <p>lorem ipsum lorem ipsum</p>
              </div>
            </div>
          
            <div class="dot-2 col-md-4 col-lg-4">
              <div class="extra-dot">       
                <h3>Custom Title 2</h3>
                <p>lorem ipsum lorem ipsum</p>
              </div>
            </div>
            
            <div class="dot-3 col-md-4 col-lg-4">
              <div class="extra-dot">       
                <h3>Custom Title 3</h3>
                <p>lorem ipsum lorem ipsum</p>
              </div>
            </div>
            
            <div class="dot-4 col-md-4 col-lg-4">
              <div class="extra-dot">       
                <h3>Custom Title 4</h3>
                <p>lorem ipsum lorem ipsum</p>
              </div>
            </div>
            
            <div class="dot-5 col-md-4 col-lg-4">
              <div class="extra-dot">       
                <h3>Custom Title 5</h3>
                <p>lorem ipsum lorem ipsum</p>
              </div>
            </div>
            
            <div class="dot-6 col-md-4 col-lg-4">
              <div class="extra-dot">        
                <h3>Custom Title 6</h3>
                <p>lorem ipsum lorem ipsum</p>
              </div>
            </div>
            
          </div>
        </div>

CSS

.slider-item {
  border: 5px solid #333;
  background: #ccc;
  height: 200px;
  font-size: 72px;
  text-align: center;
  line-height: 200px;
}
/* Slider arrows */
.slick-arrow {
  z-index: 9;
}
.slick-prev {
  left: 0;
}
.slick-next {
  right: 0;
}
/* extra dots */
.extra-dots-box{
  margin-top: 100px;
  margin-bottom: 100px;
}
.extra-dots-box .extra-dot{  
  height: 250px;
  background: #111111;
  color: #ffffff;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 15px;
  flex-direction: column;
  margin-bottom: 30px;
}
.extra-dots-box .extra-dot:hover{
  cursor: pointer;
}
.extra-dots-box .extra-dot:hover,.extra-dots-box .extra-dot.active {
  background: red;
}
.slick-dots li a{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #111111;
  color: #ffffff!important;
  display: flex;
  justify-content: center;
  align-items: center;
 }

jQuery

$(document).ready(function() {
  var slickOpts = {
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    //centerMode: true,
    easing: 'swing', // see http://api.jquery.com/animate/
    speed: 700,
    dots: true,
  };
  // Init slick carousel
  $('#carousel').slick(slickOpts);
});

回答1:

To highlight the correct navigation block, you could add a unique ID (e.g. extra-#) to each block which will allow JS to target it.

<div class="dot-1 col-md-4 col-lg-4">
  <div id="extra-0" class="extra-dot">        
    <h3>Custom Title</h3>
    <p>lorem ipsum lorem ipsum</p>
  </div>
</div>
<div class="dot-1 col-md-4 col-lg-4">
  <div id="extra-1" class="extra-dot">        
    <h3>Custom Title</h3>
    <p>lorem ipsum lorem ipsum</p>
  </div>
</div>

...

Then using the afterChange Slick event, you can add an active class to the box related to the active slide.

$('#carousel').on('afterChange', function(event, slick, currentSlide){
    // remove any existing highlight
    $('.extra-dot').removeClass('active');

    // add highlight to box corresponding to the current slide
    $(`#extra-${currentSlide}`).addClass('active');
});

To turn your boxes into navigation, you can add an onClick event that calls the slickGoTo method with the # of the corresponding slide.

<div id="extra-1" class="extra-dot" onclick="$('#carousel').slick('slickGoTo', 1)">
...
</div>

来源：https://stackoverflow.com/questions/64070032/slick-slider-custom-dots-inside-bootstrap-columns