垂直光滑旋转木马自定义点

vertical slick carousel custom dots

下午好 e 修改了这个光滑的旋转木马,其中包含自定义点,显示当前滑块,点数为 ex.(3/5)。 是否有可能将颜色更改为当前滑块? (1/5), (2/5), (3/5) ... 等等 其中 1、2、3 的颜色与 5

不同

这是滑块 https://testslick.000webhostapp.com/

var $slider = $("#slider");
$slider.on('init', function() {
    mouseWheel($slider);
}).slick({
    dots: true,
    centerPadding: '0px',
    vertical: true,
    autoplay: true,
    autoplaySpeed: 2900,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    verticalSwiping: true,
    adaptiveHeight: true,
    infinite: true,
    prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
    nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>',
    dotsClass: 'slider-paging-number',
    customPaging: function($slider) {


        return ($slider.currentSlide + 1) + ' / ' + $slider.slideCount;

    }
}).on('afterChange', function(event, $slider, currentSlide) {



    $(this).find('*[role="tablist"]').find('li').eq(0).text($slider.options.customPaging.call(this, $slider, currentSlide));

})

function mouseWheel($slider) {
    $(window).on('mousewheel', {
        $slider: $slider
    }, mouseWheelHandler);
}

function mouseWheelHandler(event) {
    event.preventDefault();
    var $slider = event.data.$slider;
    var delta = event.originalEvent.deltaY;
    if (delta > 80) {
        $slider.slick('slickPrev');
    } else {
        $slider.slick('slickNext');
    }
}


$('.prev').click(function() {
    $slider.slick('slickPrev');
});


$('.next').click(function() {
    $slider.slick('slickNext');

});
.slider-paging-number li:nth-child(1n+2) {
  display: none;
  cursor: context-menu;
}

.slider-paging-number li {
  list-style: none;
  font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
  cursor: context-menu;
  font-size: 15px;
  font-weight:800;
  padding: 16px;
  background-color: white;
  position: absolute;
  right: 50px;
  bottom:4px;
  z-index: 99999;
}
<div id="slider" class="">

    <div id="ones" >
      <img src="img/foto1.png" alt="">
    </div>
        <div id="two">
      <img src="img/foto2.png" alt="">
    </div>
            <div id="three">
      <img src="img/foto3.png" alt="">
    </div>
            <div id="four">
      <img src="img/foto4.png" alt="">
    </div>
            <div id="five">
      <img src="img/foto5.png" alt="">
    </div>

        </div >

<div class="arrows">
  <div class="prev"><span class="fa fa-angle-up"></span></div>
<div class="next"><span class="fa fa-angle-down"></span></div>

</div>

要访问您需要更改 customPaging 函数并更新 afterChange 事件以呈现 html 的项目数,如下所示:

var $slider = $("#slider");
$slider.on('init', function() {
    mouseWheel($slider);
}).slick({
    dots: true,
    centerPadding: '0px',
    vertical: true,
    autoplay: true,
    autoplaySpeed: 2900,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    verticalSwiping: true,
    adaptiveHeight: true,
    infinite: true,
    prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
    nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>',
    dotsClass: 'slider-paging-number',
    customPaging: function($slider) {
 
      return $('<div><span class="count">' + ($slider.currentSlide + 1) + '</span> / <span>'+$slider.slideCount+'</span></div>');

}
}).on('afterChange', function(event, $slider, currentSlide) {

    $(this).find('*[role="tablist"]').find('li').eq(0).html($slider.options.customPaging.call(this, $slider, currentSlide));

})

function mouseWheel($slider) {
    $(window).on('mousewheel', {
        $slider: $slider
    }, mouseWheelHandler);
}

function mouseWheelHandler(event) {
    event.preventDefault();
    var $slider = event.data.$slider;
    var delta = event.originalEvent.deltaY;
    if (delta > 80) {
        $slider.slick('slickPrev');
    } else {
        $slider.slick('slickNext');
    }
}


$('.prev').click(function() {
    $slider.slick('slickPrev');
});


$('.next').click(function() {
    $slider.slick('slickNext');

});

然后你可以添加你想要的css喜欢

.slider-paging-number li .count { color: red }