引导列中的平滑滑块自定义点

Question

我有6个引导列，其中包含对每个光滑幻灯片的简短描述。是否可以用这些列替换默认的平滑滑块圆点？最重要的部分是，我希望保留现有的布局，而不是像默认的点一样将它们全部内联。

jsfiddle demo

例如，当幻灯片4是活动的(自动播放:真)时，列4将具有红色背景颜色。如果幻灯片5处于活动状态，则第5列将具有红色背景，依此类推。

​

​

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);
});

Answer 1

为了突出显示正确的导航块，您可以向每个块添加一个唯一的ID (例如extra-#)，这将允许JS将其作为目标。

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

...

然后使用afterChange Slick事件，可以将active类添加到与活动幻灯片相关的框中。

$('#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');
});

若要将框转换为导航，可以添加一个onClick事件，该事件使用相应幻灯片的#调用slickGoTo方法。

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