Как добавить rangelider.js для управления перетаскиванием Slick Slider - PullRequest
Новая
       34

Как добавить rangelider.js для управления перетаскиванием Slick Slider

0 голосов
/ 09 июня 2018

Я пытаюсь объединить ползунок диапазона с скользящим ползунком для функции перетаскивания, но я застрял с его интеграцией, попытался манипулировать смещением, но скользкий ползунок сбрасывается после того, как он снова меняет слайд.

Вот что у меня естьудалось сделать до сих пор 

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

1 Ответ

0 голосов
/ 19 июня 2018

внесите следующее изменение и попробуйте, начиная с первого слайда, прежде чем перемещать слайдер.function slickIt () {$ (". single-item"). slick ({centerMode: false, ...

Дайте мне знать, получил ли он то, что вы ищете ...

...