javascript - 将 controlNav 设置为 "thumbnails"动态添加幻灯片到 flexslider

Question

我希望将幻灯片动态添加到我在页面加载时实例化的 felixslider 实例。

我尝试了以下代码:

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

但这导致了超出最大调用堆栈错误

我不知道如何才能动态地将幻灯片添加到 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>");