如何添加 rangeslider.js 来控制 Slick Slider 的拖动答案

【问题标题】：How to add rangeslider.js for controlling drag of Slick Slider如何添加 rangeslider.js 来控制 Slick Slider 的拖动
【发布时间】：2018-06-09 15:47:32
【问题描述】：

我正在尝试将范围滑块与光滑滑块结合起来以实现拖动功能，但我坚持集成它，尝试操纵偏移，但光滑滑块在再次更改滑块后会重置。

这是我目前能够做的事情

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

【问题讨论】：

您实际上是在更改有插件实例 (Slick) 的元素的 CSS left 属性。这似乎可行，但插件不知道该更改。我建议您全面检查 toolset Slick has to offer 关于 events 和 methods 以编程方式检测/更改当前幻灯片。您将需要对范围滑块位置（以百分比表示）进行一些数学运算以匹配幻灯片编号。我会寻找slickGoTo 方法。 -- 祝你好运！
@Louys 实际上是我可以使用的 slickGoto 方法，但我需要拖动效果而不仅仅是滑动......我的意思是随着旋钮滑动
你好@Manjunath你找到解决方案了吗？我试图达到完全相同的效果，但我似乎无法让它发挥作用。我希望你能在这里帮助我。
@HuubS 不幸的是我没有。由于某些原因，我放弃了这个想法，但是当我有时间时，我会添加到我的清单中以实现它:)
@Manjunath 感谢您的回复。我将使用另一个选项，即当幻灯片达到某个阈值时更改幻灯片。拖动似乎是不可能的，除了改变变换的 x 坐标。

标签： javascript jquery jquery-ui-draggable slick.js rangeslider

【解决方案1】：

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

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

【讨论】：

这不是我想要的。我需要旋钮来控制滑块。