Как показать следующий слайд, когда вы нажимаете на изображение в flexslider

Я использую плагин flexslider, и я хотел знать, есть ли простой способ (помимо изменения ядра плагина, который это то, что я собираюсь делать, если я не нахожу простой ответ) для отображения следующего слайда при нажатии на текущий слайд. Я установил такой flexslider

$('.flexslider').flexslider({
    directionNav : false,
    slideshow: false,
        animation: "slide",
        controlsContainer: ".flex-container"
    });

Я отключил команду Prev/Next, потому что мне они не нравились. Что я должен делать?

Ответы

Ответ 1

Возможно, слишком поздно, но вот решение для Flexslider 2:

$('.flexslider').flexslider({
    directionNav : false,
    slideshow: false,
    animation: "slide",
    controlsContainer: ".flex-container",
    start: function(slider) {
    $('.slides li img').click(function(event){
        event.preventDefault();
        slider.flexAnimate(slider.getTarget("next"));
    });
}
});

Ответ 2

У меня была проблема Safari с приведенным выше кодом. Это мое легкое решение.

jQuery( document ).ready( function( $ ) {
    $('.flexslider').on('click', function(){
        $(this).find('.flex-next').click();
    });  
}


$(window).load(function() { 
    // Slider
    $('.flexslider').flexslider({
    directionNav : false,
    slideshow: false,
    animation: "slide",
    controlsContainer: ".flex-container"    
    });
});

Ответ 3

Здесь небольшое обновление принятого ответа выше, которое предназначено для конкретного клика, а не всех слайдеров на странице:

$('.flexslider').flexslider({ 
    start: function(slider) {
        $('.slides li img', slider).click(function(event){
            event.preventDefault();
            slider.flexAnimate(slider.getTarget("next"));
        });
    }
});

Ответ 4

После завершения каждой анимации ползунка найдите активный слайд и измените изображение src

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    slideshow: false,
    touch: true,
    itemWidth: 235,
    itemMargin: 10,
    after: function (slider) {
      $(slider).find('.flex-active-slide').find("img").each(function () {
      var src = $(this).attr("data-src");
      $(this).attr("src", src).removeAttr("data-src");
   });
});