Slick Carousel - 自定义指标

Question

我需要创建一个带有自定义设计的滑块指示器和控件的光滑滑块。滑块自动滚动，并且与用户的点击和滑动交互。这个 Pen 是我现在拥有的一个非常准确的演示。

描述

我正在使用 Slick 的 afterChange 函数来计算当前活动幻灯片的索引，然后随着每张幻灯片的移动移动橙色指示器，如下所示：

$('.about-slider-content').on('afterChange', function(event, slick, direction){
    var left_val, li_wid = parseInt($(".individual-indicators .slide").css("width"));
    var currentSlideIndex = $(".about-slider-content").slick("slickCurrentSlide");
    left_val = currentSlideIndex*li_wid+40;
    $(".about-active-indicator").animate({
        left: left_val
    });
    // left
});

HTML

<div class="about-slider">
  <ul class="about-slider-content">
    <li>
      <h4 class="about-slider-content__header bold-text">Industrial Machine Learning</h4>
      <p class="description-text about-slider-content__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
    </li>
    <li>
      <h4 class="about-slider-content__header bold-text">Industrial Operations and Reliability Experience</h4>
      <p class="description-text about-slider-content__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
    </li>
    <li>
      <h4 class="about-slider-content__header bold-text">Leverage your existing investments</h4>
      <p class="description-text about-slider-content__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
    </li>
  </ul>
  <div class="about-slider-indicator">
    <span class="slider-arrow arrow-prev icon-arrow-left">
        <img src='https://image.ibb.co/h2WX0a/arrow_left.png'>
    </span>
    <!--<button type="button" class="slick-prev">Previous</button>-->
    <ul class="individual-indicators">
      <span class="about-active-indicator"></span>
      <li class="slide" id="1"></li>
      <li class="slide" id="2"></li>
      <li class="slide" id="3"></li>
    </ul>
    <span class="slider-arrow arrow-next icon-arrow-right">
      <img src="https://image.ibb.co/bESGRF/arrow_right.png" alt="arrow_right" border="0">
    </span>
  </div>
</div>

问题

检查我的笔时，您会注意到橙色滑块指示器的移动与每张幻灯片的移动不同步。指标慢了几毫秒或更简洁地说，指标仅在幻灯片更改后移动。我曾尝试使用 Slick 的 beforeChange 方法，但在这种情况下，滑块指示器根本不会在第一张幻灯片更改时移动，而且幻灯片的顺序也会更改。

我想要什么

幻灯片指示器需要与幻灯片的移动同步移动，即指示器必须随着每张幻灯片的变化而改变位置。像这样 site
使幻灯片指示器可拖动的任何方法，即单击并拖动指示器将适当地更改幻灯片。像这样 site

我们将不胜感激。

Answer 1

你可以监听beforeChange事件，实际上事件处理程序实际上暴露了当前和下一张幻灯片索引，所以你不需要再次调用.slick()方法来访问索引，即

$('.about-slider-content').on('afterChange', function(event, slick, direction){
    var currentSlideIndex = $(".about-slider-content").slick("slickCurrentSlide");

    // Rest of your code...
});

...可以简单地重构为：

$('.about-slider-content').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var currentSlideIndex = nextSlide;

    // Rest of your code...
});

解决方案的下一部分是简单地设置基本坐标 left，使用 .css() 而不是 .animate()。转换已经由 CSS 转换处理，因此实际上没有必要使用 jQuery 为您完成繁重的工作：

$(".about-active-indicator").css({
    left: left_val
});

如果你想完美同步速度，请记住将 CSS 过渡持续时间设置为与幻灯片 speed/transition 持续时间相同。

您可以在下面的代码片段中看到概念验证示例（CSS 只是从您的笔中编译的 SASS 复制而来，没有任何进一步修改）。我也分叉了你的笔并修复了它：http://codepen.io/terrymun/pen/QpxgYy?editors=0010

$(document).ready(function() {
 var aboutSlider = $('.about-slider-content');
 $('.about-slider-content').slick({
  // dots: true
  infinite: true,
  arrows: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  mobileFirst: true,
  autoplay: true,
  autoplaySpeed: 5000
  // prevArrow: "<img src='https://image.ibb.co/h2WX0a/arrow_left.png'>",
  // nextArrow: "<img src='../img/background/arrow-right.png'>"
 });

 $(".arrow-next").on("click", function() {
  $('.about-slider-content').slick("slickNext");
  //$(".individual-indicators .slide").removeClass("about-slider-active");
  var currentSlideIndex = $(".about-slider-content").slick("slickCurrentSlide")
 });
 $(".arrow-prev").on("click", function() {
  $(".about-slider-content").slick("slickPrev");
  //$(".individual-indicators .slide").removeClass("about-slider-active");
  var currentSlideIndex = $(".about-slider-content").slick("slickCurrentSlide");
 });

 $('.about-slider-content').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var left_val, li_wid = parseInt($(".individual-indicators .slide").css("width"));
    var currentSlideIndex = nextSlide;
  //$(".individual-indicators .slide").removeClass("about-slider-active");
  //var currentSlideIndex = $("li.slick-acitve").attr('id');
  left_val = currentSlideIndex*li_wid+40;
  $(".about-active-indicator").css({
      left: left_val
     });
 });
})

.about-slider-header {
  width: 90%;
  margin: auto;
  padding: 15px 0;
  background-color: #000;
  text-align: center;
  text-transform: uppercase;
}

.about-slider {
  background-color: #fff;
  padding: 25px 17px 30px 17px;
}

.about-slider-content__header {
  padding-bottom: 20px;
  text-transform: uppercase;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: orange;
}

.about-slider-content__description {
  padding-top: 20px;
  margin-bottom: 45px;
  font-size: 12px;
}

.slider-arrow {
  display: inline-block;
  transition: all 0.2s ease-out;
  cursor: pointer;
  position: relative;
  top: 2px;
}

.slide {
  height: 1px;
  background-color: #adadad;
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  margin: 0;
}

.about-slider-indicator {
  display: flex;
}

.about-slider-indicator .individual-indicators {
  display: flex;
  margin: auto 7px auto 7px;
  position: relative;
}

.about-slider-indicator .individual-indicators .about-active-indicator {
  position: absolute;
  content: "";
  height: 3px;
  vertical-align: middle;
  background: linear-gradient(to right, #f79237, #f3775a);
  top: -1px;
  width: 20px;
  transition: 0.8s ease;
  left: 40px;
}

.about-slider-active {
  height: 3px;
  vertical-align: middle;
  background: grey;
  position: relative;
  top: -1px;
}

.about-slider-content li {
  cursor: grab;
}

.about-slider-content li:active {
  cursor: grabbing;
}

.next-animation {
  transition: all 0.2 ease;
  transform: translateX(5px);
}

.prev-animation {
  transition: all 0.2s ease;
  transform: translateX(-5px);
}

.slider-arrow {
  color: red;
  cursor: auto;
}

.slider-arrow-active {
  transition: all 0.6s ease;
  color: #000;
  cursor: pointer;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<div class="about-slider">
  <ul class="about-slider-content">
    <li>
      <h4 class="about-slider-content__header bold-text">Industrial Machine Learning</h4>
      <p class="description-text about-slider-content__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </li>
    <li>
      <h4 class="about-slider-content__header bold-text">Industrial Operations and Reliability Experience</h4>
      <p class="description-text about-slider-content__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
    </li>
    <li>
      <h4 class="about-slider-content__header bold-text">Leverage your existing investments</h4>
      <p class="description-text about-slider-content__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
    </li>
  </ul>
  <div class="about-slider-indicator">
    <span class="slider-arrow arrow-prev icon-arrow-left">
        <img src='https://image.ibb.co/h2WX0a/arrow_left.png'>
    </span>
    <!--<button type="button" class="slick-prev">Previous</button>-->
    <ul class="individual-indicators">
      <span class="about-active-indicator"></span>
      <li class="slide" id="1"></li>
      <li class="slide" id="2"></li>
      <li class="slide" id="3"></li>
    </ul>
    <span class="slider-arrow arrow-next icon-arrow-right">
      <img src="https://image.ibb.co/bESGRF/arrow_right.png" alt="arrow_right" border="0">
    </span>
  </div>
</div>

Slick Carousel - 自定义指标

Slick Carousel - Custom indicator

javascript

css

jquery

carousel

slick.js