將controlNav動態添加到flexslider並將controlNav設置爲「縮略圖」

Question

我正在尋找動態地將幻燈片添加到我在頁面加載中實例化的felixslider實例。

我嘗試下面的代碼：

$('#product_slider_main').data('flexslider').addSlide("<li> slide </li>"); 

但是，這導致了Maximum Call Stack exceeded error

我不知道怎麼回事，我可以幻燈片動態地添加到flexslider。

我最初的實例

$('#product_slider_main').flexslider({ 
    startAt: parseInt($('.featured_image', $(this)).data('index'), 10), 
    touch: true, 
    pauseOnHover: true, 
    controlNav: "thumbnails", 
    directionNav: false, 
    {% if settings.product_slideshow_animation == 'none' or settings.product_slideshow_animation == 'zoom' %} 
    slideshow: false, 
    {% else %} 
    animation: "{{ settings.product_slideshow_animation }}", 
    {% endif %} 
    slideshowSpeed: {% if settings.slideshow_speed != blank %}{{ settings.slideshow_speed }}{% else %}10{% endif %}*1000, 
    animationSpeed: 1 
    }); 

Answer 1

添加/追加一個新的幻燈片FlexSlider的方法是正確的，但你的目標不正確的DOM元素。

在你的初始化，您已經啓動了#product_slider_main flexslider所以你應該附加這樣

$('#product_slider_main').data('flexslider').addSlide("<li> slide </li>");