javascript - Slick Carousel - 自定义指标

Question

我需要创建一个带有自定义设计的 slider 指示器和控件的光滑 slider 。 slider 自动滚动，并且与用户的点击和滑动交互。这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>

问题

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

我想要什么

• 幻灯片指示器需要与幻灯片的移动同步移动，即指示器必须随着每张幻灯片的变化而改变位置。像这样的 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 过渡持续时间设置为与幻灯片速度/过渡持续时间相同。

您可以在下面的代码片段中看到概念验证示例(CSS 只是从您笔下编译的 SASS 中复制而来，没有任何进一步修改)。我也 fork 了你的笔并修复了它: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>