垂直光滑旋转木马自定义点
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 }
下午好 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 }