光滑的滑块自定义HTML分页

Question

是否可以像Bootstrap Carousel一样使用Slick Slider的HTML来创建自定义分页点。

Bootstrap分页示例

<ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

我知道您可以像这样创建自定义点；

customPaging : function(slider, i) {
    var thumb = $(slider.$slides[i]).data('thumb');
    return '<a><img src="'+thumb+'"></a>';
}

但是这种方法不适用于我要实现的目标。这就是我希望能够用作我的分页导航的内容。

<ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

customPaging : function(slider, i) {
    var thumb = $(slider.$slides[i]).data('thumb');
    return '<a><img src="'+thumb+'"></a>';
}

jQuery(document).ready(function($){
	$('.step').click(function(){
		var elem = $(this);
		var pointer = $('#pointer');

		if( elem.hasClass('one') ){
			pointer.css('left', '0');
		}else if( elem.hasClass('two') ){
			pointer.css('left', '20%');
		}else if( elem.hasClass('three') ){
			pointer.css('left', '40%');
		}else if( elem.hasClass('four') ){
			pointer.css('left', '60%');
		}else{
			pointer.css('left', '80%');
		}

		$('.step').removeClass('active');
		elem.addClass('active');
	});
});

Answer 1

您可以使用纯CSS / HTML进行操作。slick-active在活动幻灯片上使用光滑滑块。将指针与CSS 伪元素 一起使用，::before并Sign up与一起使用::after。

.slick-dots {
  padding-top: 100px;
}
.slick-dots .slick-active  {
  position:relative;
}
.slick-dots .slick-active::before {
  content: "";
  /* use the ppointer instead of this link */
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png) top center no-repeat;
  position:absolute;
  top: -70px;
  left: -25px;
  width: 50px;
  height: 50px;
  border: 1px solid red;
}

.slick-dots .slick-active::after {
  content: "Sign Up ";
  position:absolute;
  top: 30px;
  left: -50px;
  width: 100px;
  border: 1px solid red;
}

.slick-dots {
  padding-top: 100px;
}
.slick-dots .slick-active  {
  position:relative;
}
.slick-dots .slick-active::before {
  content: "";
  /* use the ppointer instead of this link */
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png) top center no-repeat;
  position:absolute;
  top: -70px;
  left: -25px;
  width: 50px;
  height: 50px;
  border: 1px solid red;
}

.slick-dots .slick-active::after {
  content: "Sign Up ";
  position:absolute;
  top: 30px;
  left: -50px;
  width: 100px;
  border: 1px solid red;
}

$().ready(function(){
  $('.slick-carousel').slick({
    arrows: true,
    centerPadding: "0px",
    dots: true,
    slidesToShow: 1,
    infinite: false
  });
});

body {
  background: #333;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}
body .slick-slide .slide-content {
  margin: 0 10%;
  padding: 50px 100px;
  background: #fff;
}
body .slick-list {
  margin: 20px 0px;
}
body .slick-prev,
body .slick-next {
  position: absolute;
  right: 10%;
  background: #777;
  border: none;
  color: transparent;
  width: 30px;
  height: 30px;
}
body .slick-prev:before,
body .slick-next:before {
  content: ">";
  color: #fff;
  font-size: 25px;
}
body .slick-prev {
  left: 10%;
}
body .slick-prev:before {
  content: "<";
}
body .slick-dots {
  list-style: none;
  margin: 0 auto;
  text-align: center;
}
body .slick-dots li {
  display: inline-block;
}
body .slick-dots li button {
  transition: 0.2s background-color ease-in-out 0s;
  border: none;
  padding: 0;
  color: transparent;
  width: 10px;
  height: 10px;
  background-color: #777;
  margin-right: 10px;
  border-radius: 50%;
}
body .slick-dots li.slick-active button {
  background-color: #fff;
}
.slick-dots {
  padding-top: 100px;
}
.slick-dots .slick-active {
  position: relative;
}
.slick-dots .slick-active::before {
  content: "";
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png)
    top center no-repeat;
  position: absolute;
  top: -70px;
  left: -25px;
  width: 50px;
  height: 50px;
  border: 1px solid red;
}
.slick-dots .slick-active::after {
  content: "Sign Up ";
  position: absolute;
  top: 30px;
  left: -50px;
  width: 100px;
  border: 1px solid red;
}

使用SVG指针作为外部文件。

这是一个codepen。

https://codepen.io/anon/pen/PLJMvN

使用这些。如果它们不起作用，请在“私人/隐身”窗口中打开。您不应该使用AdBlocker。

https://codepen.io/anon/pen/pYdovB

https://codepen.io/anon/pen/VRrYMg

请记住，您需要调整::before和::after元素的位置和大小。