光滑的轮播 - 自定义指示器

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过渡持续时间设置为与滑动速度/过渡持续时间相同。

您可以在下面的代码片段中看到概念验证示例（只需从您的笔中编译的SASS中复制CSS，无需进一步修改）。我还分叉你的笔并修好它：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>