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

Question

下午好 修改了这个光滑的轮播，其中包含自定义点，显示当前滑块，其数量为dotscount 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>

Answer 1

要访问您需要更改Alamofire.request(url, method: .post, parameters: params, encoding: JSONEncoding.default, headers: headers).responseJSON { (response: DataResponse) in switch(response.result) { case .success(let value): let json = JSON(value) for index in 0 ..< json["items"].count { let path = json["items"][index] self.Data.append(ProfileModel()) self.Data[index].name = path["name"].stringValue self.Data[index].email = path["email"].stringValue self.Data[index].created = path["created"].double! self.tableView.reloadData() } DispatchQueue.main.async { } case .failure(let error): print(error) break } }.resume() } 功能所需的项目数，并更新您的customPaging事件，以便像这样呈现afterChange：

html

然后你可以添加你想要的CSS

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

});