javascript - 如何添加 rangeslider.js 以控制 Slick Slider 的拖动

Question

我正在尝试将范围 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();

    });

代码笔:https://codepen.io/mjn/pen/NzdpGG

Answer 1

进行以下更改并尝试在移动 slider 之前从第一张幻灯片开始。 函数 slickIt(){ $(".single-item").slick({ 中心模式:假，...

让我知道它是否满足您的需求...