bootstrap 列内的光滑滑块自定义点

Question

我有 6 bootstrap 列，其中包含每张精美幻灯片的简短说明。是否可以用这些列替换默认的光滑滑块点？最重要的部分是我想保留现有的布局，而不是让它们像默认点一样全部内联。

例如，当幻灯片 4 处于活动状态时 ( autoplay: true )，第 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 class 添加到与活动幻灯片相关的框。

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

bootstrap 列内的光滑滑块自定义点

Slick slider custom dots inside bootstrap columns

html

css

jquery

slick.js