вертикальная скользящая карусель нестандартных точек - PullRequest
Новая
       25

вертикальная скользящая карусель нестандартных точек

0 голосов
/ 29 мая 2018

Добрый день e изменил эту скользкую карусель, которая содержит пользовательские точки, которые показывают текущий ползунок, с количеством точных отсчетов, например (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>

1 Ответ

0 голосов
/ 29 мая 2018

Чтобы получить доступ к номеру элемента, вам нужно изменить функцию 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 }
...