Question

我正在尝试将范围滑块与光滑滑块结合使用以进行拖动功能，但我仍然坚持使用它进行集成，尝试重新设置偏移但是滑动滑块在重新滑动后重置。

这是迄今为止我能够做到的事情

    $(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();

    });

Codepen：https://codepen.io/mjn/pen/NzdpGG

Answer 1

进行以下更改并尝试在移动滑块之前从第一张幻灯片开始。 function slickIt（）{ $（＆＃34;。单项目＆＃34）。光滑（{ centerMode：false， ...

让我知道它是否得到了你想要的东西......

如何添加rangelider.js来控制Slick Slider的拖动

1 个答案: