光滑的滑块保留默认点并添加其他点

问题描述

我们可以使自定义元素具有与点相同的行为吗？我想要的是保留默认的点，但还要让其他一些元素充当点。例如，如果幻灯片2是活动的，则元素 dot-2 应该具有类 active 。单击行为也是如此，如果我单击元素.dot-3，则幻灯片3应该处于活动状态。

jsfiddle

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

解决方法

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,asNavFor: '.slider-for',dots: false,focusOnSelect: true,responsive: [{
                  breakpoint: 992,settings: {
                      vertical: false,}
              },{
                  breakpoint: 768,{
                  breakpoint: 580,slidesToShow: 3,{
                  breakpoint: 380,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.1),0 2px 4px 0 rgba(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>