html自定义分页,jquery – Slick Slider自定义HTML分页

就像Bootstrap Carousel允许的那样,是否可以使用Slick Slider的

HTML创建自定义分页点.

Bootstrap分页示例

我知道你可以像这样创建自定义点;

customPaging : function(slider, i) {

var thumb = $(slider.$slides[i]).data('thumb');

return '';

}

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

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

});

});

.steps {

position: relative;

margin-top: 4rem;

padding-top: 14rem;

display: -webkit-flex;

display: -moz-flex;

display: -ms-flex;

display: -o-flex;

display: flex;

}

.steps #pointer {

position: absolute;

top: 0;

left: 0;

width: 20%;

text-align: center;

-webkit-transition: left 0.3s ease;

-o-transition: left 0.3s ease;

transition: left 0.3s ease;

}

.steps #pointer svg {

width: 10rem;

height: auto;

}

.steps .step {

width: 20%;

text-align: center;

}

.steps .step svg circle {

fill: blue;

-webkit-transition: fill 0.3s ease;

-o-transition: fill 0.3s ease;

transition: fill 0.3s ease;

}

.steps .step p {

font-size: 1.8rem;

font-weight: 600;

color: blue;

opacity: 0;

max-height: 0;

overflow: hidden;

-webkit-transition: max-height 0s, opacity 0.3s ease;

-o-transition: max-height 0s, opacity 0.3s ease;

transition: max-height 0s, opacity 0.3s ease;

}

.steps .step.active svg circle {

fill: lightblue;

}

.steps .step.active p {

opacity: 1;

max-height: unset;

}

slider here

Sign up

Sign up

Sign up

Sign up

Sign up