我正在尝试将范围 slider 与光滑 slider 结合起来以实现拖动功能,但我一直坚持集成它,尝试操纵偏移量,但光滑 slider 在再次更改幻灯片后会重置。
这是我到目前为止能做的
$(function(){
function getSlides(){
var slidetrack = $(".slick-track");
var width = slidetrack[0].clientWidth;
var slides = $(".slick-slide").length;
var min = width/slides;
var max = width;
//console.log(width);
//console.log(slides + "|" + min + "|" + max);
var input = '<input type="range" min="'+ min +'" max="'+ max +'" value="0" step="1" data-rangeslider>';
$(".budget").append(input);
ranger(slidetrack,min);
}
function ranger(slidetrack,min){
$('input[type="range"]').rangeslider({
polyfill:false,
onInit:function(){
},
onSlide:function(position, value){
slidetrack.css("left",min-value+"px");
},
onSlideEnd:function(position, value){
//console.log('onSlideEnd');
//console.log('position: ' + position, 'value: ' + value);
}
});
}
function slickIt(){
$(".single-item").slick({
centerMode: true,
slidesToShow: 3,
infinite:false
});
}
slickIt();
getSlides();
});
最佳答案
进行以下更改并尝试在移动 slider 之前从第一张幻灯片开始。 函数 slickIt(){ $(".single-item").slick({ 中心模式:假, ...
让我知道它是否满足您的需求...
关于javascript - 如何添加 rangeslider.js 以控制 Slick Slider 的拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50775971/