Бесконечный цикл Flexslider не работает

Я искал по всей сети, есть очень известная проблема с Flexslider либо с ползунком, либо с каруселью, когда он доходит до последнего элемента в слайдере, он возвращается к первому вместо того, чтобы плавно поддерживать бесконечный цикл Я не могу полагаю, что ни у кого нет решения для этого, это код flexSlider, который я использую:

$(document).ready(function() {
    $(window).load(function() {
        $('#carousel-two').flexslider({
            animation : "slide",
            controlNav : false,
            animationLoop : true,
            slideshow : true,
            itemWidth : 234,
            itemMargin : 20,
            minItems : 3,
            maxItems : 5
            //asNavFor : '.flexslider'
        });
    });
});

Что бы я ни делал, это не работает. когда он доходит до последнего элемента, он не поддерживает плавную анимацию с бесконечным циклом. у кого-нибудь есть решение?

Спасибо


jquery infinite-loop flexslider
person gil hamer    schedule 18.09.2014    source источник
comment
Я думаю, что по умолчанию карусель не будет зацикливаться бесконечно. Я тоже столкнулся с этой проблемой. Я перехожу на bxslider. :( А вы когда-нибудь находили для этого решение?   -  person jehzlau    schedule 10.12.2014
comment
к сожалению, нет .. забавно, что я тоже перешел на Bxslider :) только из-за этого. это очень странный flexSlder, люди не делают ничего, чтобы исправить это ..   -  person gil hamer    schedule 10.12.2014
comment
Ага. Я только что прочитал здесь: github.com/woothemes/FlexSlider/issues/287, что Круговой цикл, который мы ищем, еще не реализован в flexslider. Жаль, что это не лучший отзывчивый слайдер, как утверждали Woothemes. Ха-ха!   -  person jehzlau    schedule 10.12.2014

Ответы (3)


arrow_upward
5
arrow_downward

Вот как это сделать, сохранив свойство itemWidth:

jQuery('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        minItems: 4,
        maxItems: 6,
        itemWidth: 210,
        itemMargin:5,
        controlNav: false,
        end : function(slider){
                jQuery('.flexslider .slides li').each(function(){
                    slider.addSlide('<li>'+jQuery(this).context.innerHTML+'</li>', slider.count);
                    jQuery('.flexslider .slides').append('<li>'+jQuery(this).context.innerHTML+'</li>');
                });
            }

      });

Главное использовать функцию jQuery в свойстве end:. Я думаю, что animationLoop также нужно установить в false. Это позволяет использовать карусель с бесконечным циклом. Здесь я нашел это.

person J May    schedule 13.05.2016
comment
Отличное решение. Спасибо J - person Amir Keshavarz; 23.06.2017
comment
у меня не работает ... mytry.html:221 Uncaught TypeError: Cannot read property 'innerHTML' of undefined at HTMLLIElement.<anonymous> (mytry.html:221) at Function.each (jquery-3.2.1.js:362) at jQuery.fn.init.each (jquery-3.2.1.js:157) at Object.end (mytry.html:220) at jQuery.fn.init.slider.flexAnimate (jquery.flexslider.js:730) at HTMLAnchorElement.<anonymous> (jquery.flexslider.js:326) at HTMLAnchorElement.dispatch (jquery-3.2.1.js:5206) at HTMLAnchorElement.elemData.handle (jquery-3.2.1.js:5014) - person Julix; 20.07.2017

arrow_upward
2
arrow_downward

если вы удалите строку

itemWidth: 234,

animationLoop будет работать

person akbar zota    schedule 19.04.2015

arrow_upward
0
arrow_downward

По крайней мере, одна вещь установлена ​​неправильно: у вас есть

animationLoop: false,

должен быть:

animationLoop: true,
person Macsupport    schedule 18.09.2014
comment
@ Адриан Форсиус - даже с animationLoop: true; он не работает и не зацикливается. когда он доходит до последнего элемента и возвращает вас к первому, сдвигая все назад. - person gil hamer; 18.09.2014
comment
Тогда вам понадобится ссылка или jsfiddle, чтобы помочь вам - person Macsupport; 18.09.2014