Cách hiển thị trang trình bày tiếp theo khi bạn nhấp vào hình ảnh trong hình thu nhỏ

Question

Tôi đang sử dụng plugin flexslider và tôi muốn biết nếu có cách dễ dàng (ngoài việc thay đổi cốt lõi của plugin đó là những gì tôi sẽ phải làm gì nếu tôi không tìm thấy câu trả lời dễ dàng) để hiển thị trang trình bày tiếp theo khi bạn nhấp vào trang trình bày hiện tại. Tôi đã thiết lập bản lề linh hoạt như thế này

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

Tôi đã tắt lệnh Trước/Tiếp theo vì tôi không thích chúng. Tôi nên làm gì?

Answer 1

Có lẽ một chút quá muộn, nhưng đây là giải pháp cho 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")); 
    }); 
} 
}); 

Answer 2

Sau mỗi hoạt hình trượt hoàn tất, tìm ra trượt hoạt động và thay đổi hình ảnh 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"); 
    }); 
}); 

Answer 3

tôi đã một vấn đề với mã Safari ở trên. Đây là giải pháp dễ dàng của tôi.

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"  
    }); 
}); 

Answer 4

Dưới đây là một bản cập nhật nhỏ để câu trả lời được chấp nhận trên nhắm thanh trượt cụ thể nhấn vào, chứ không phải tất cả các thanh trượt trên trang:

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