光滑滑块保留默认点并添加额外点

Question

我们能否使自定义元素具有与点相同的行为？我想要的是保留默认的点，但也有一些其他元素作为点。例如，如果幻灯片2是活动的，元素dot-2应该具有活动类。单击行为也是如此，如果我单击.dot-3元素，幻灯片3应该是活动的。

小提琴

<div id="carousel" class="slider">
  <div class="slider-item">1</div>
  <div class="slider-item">2</div>
  <div class="slider-item">3</div>
</div>

<div class="extra-dots-box">
  <div class="dot-1 extra-dot">
    <span>1</span>
    <h3>Custom Title</h3>
    <p>lorem ipsum lorem ipsum</p>
  </div>
 <div class="dot-2 extra-dot">
    <span>2</span>
    <h3>Custom Title</h3>
    <p>lorem ipsum lorem ipsum</p>
  </div>
  <div class="dot-3 extra-dot">
    <span>3</span>
    <h3>Custom Title</h3>
    <p>lorem ipsum lorem ipsum</p>
  </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{
  display: flex;
  margin-top: 100px;
  margin-bottom: 100px;
}
.extra-dots-box .extra-dot{
  width: 350px;
  height: 250px;
  background: #111111;
  color: #ffffff;
  font-size: 18px;
  margin-right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.extra-dots-box .extra-dot:hover{
  cursor: pointer;
}
.extra-dots-box .extra-dot:hover,.extra-dots-box .extra-dot.active {
  background: red;
}

jQuery

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

Answer 1

​

jQuery(document).ready(function($) {
      $('.slider-for').slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: false,
          fade: true,
          dots: true,
          customPaging: function(slick,index) {
              return '<a>' + (index + 1) + '</a>';
          },
          asNavFor: '.slider-nav'
      });
      //set active class to first slide
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');
      $('.slider-nav').slick({
          slidesToShow: 6,
          slidesToScroll: 1,

          asNavFor: '.slider-for',
          dots: false,
          focusOnSelect: true,
          responsive: [{
                  breakpoint: 992,
                  settings: {
                      vertical: false,
                  }
              },
              {
                  breakpoint: 768,
                  settings: {
                      vertical: false,
                  }
              },
              {
                  breakpoint: 580,
                  settings: {
                      vertical: false,
                      slidesToShow: 3,
                  }
              },
              {
                  breakpoint: 380,
                  settings: {
                      vertical: false,
                      slidesToShow: 2,
                  }
              }
          ]
      });
      $('.slider-nav').on('mouseover', '.slick-slide', function (e) {
        var $currTarget = $(e.currentTarget), 
        index = $currTarget.data('slick-index'),
        slickObj = $('.slider-for').slick('getSlick');
    
    slickObj.slickGoTo(index);
    
});
  });

.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{
  display: flex;
  margin-top: 100px;
  margin-bottom: 100px;
}
.extra-dots-box .extra-dot{
  width: 350px;
  height: 250px;
  background: #111111;
  color: #ffffff;
  font-size: 18px;
  margin-right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.extra-dots-box .extra-dot:hover{
  cursor: pointer;
}
.extra-dots-box .extra-dot:hover,.extra-dots-box .extra-dot.active {
  background: red;
}

/*For dots*/
.slick-dots {
    position: absolute;
    bottom: -45px;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
.slider-nav .slick-slide.slick-current.slick-active .extra-dot {
    border: 1px solid #80D6CF;
    border-radius: 2px;
    background-color: red;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.1), 0 2px 4px 0 rgba(0,0,0,0.1);
    padding: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="carousel" class="slider slider-for">
  <div class="slider-item">1</div>
  <div class="slider-item">2</div>
  <div class="slider-item">3</div>
</div>

<div class="extra-dots-box slider-nav thumb-image">
  <div class="dot-1 extra-dot">
    <span>1</span>
    <h3>Custom Title</h3>
    <p>lorem ipsum lorem ipsum</p>
  </div>
 <div class="dot-2 extra-dot">
    <span>2</span>
    <h3>Custom Title</h3>
    <p>lorem ipsum lorem ipsum</p>
  </div>
  <div class="dot-3 extra-dot">
    <span>3</span>
    <h3>Custom Title</h3>
    <p>lorem ipsum lorem ipsum</p>
  </div>
</div>

​