添加/删除滑块后的 FlexSlider 同步答案

【问题标题】：FlexSlider sync after adding/removing sliders添加/删除滑块后的 FlexSlider 同步
【发布时间】：2020-06-26 00:43:51
【问题描述】：

我刚刚使用 FlexSlider 实现了一个带有缩略图的滑块，一切正常。

当我单击其中一个缩略图时，滑块会移动到该幻灯片。

但是，在我删除所有幻灯片并添加新幻灯片后，主滑块可以正常工作，但缩略图导航不起作用。它检查了所有 html 代码，但语法似乎相同。

有什么方法可以再次同步吗？

这是我初始化设置的代码。

$('#carousel').flexslider({
  animation: "slide",
  controlNav: false,
  animationLoop: false,
  slideshow: false,
  itemWidth: 150,
  itemMargin: 5,
  asNavFor: '#slider'
});

$('#slider').flexslider({
  animation: "slide",
  controlNav: false,
  animationLoop: false,
  slideshow: false,
  sync: "#carousel"
});

这里是我删除/添加幻灯片的地方。

while ($('#slider').data('flexslider').count > 0) 
    $('#slider').data('flexslider').removeSlide(0);
while ($('#carousel').data('flexslider').count > 0) 
    $('#carousel').data('flexslider').removeSlide(0);

$.ajax({
    type: "GET",
    url: "/getImage.php",
    data: {idStyle: $('#idStyle').val(), color: a},  
    dataType: "json", 
    success: function(response){
      for (var i = 0; i < response.length; i++) {
          $('#slider').data('flexslider').addSlide('<li><img src="https://via.placeholder.com/150"></li>');
          $('#carousel').data('flexslider').addSlide('<li><img src="https://via.placeholder.com/150"></li>');
      }
    }
});

$('#slider').flexslider(0);
$('#carousel').flexslider(0);

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： javascript html jquery flexslider

【解决方案1】：

我只是设法给每个 li 索引 id 并手动为其添加功能，它工作得非常好。我发布我的代码以防有人遇到同样的问题。

$("#flexSlide").on("click", ".carouselInner", function(event){
    var idx = $(this).attr('id');
    idx = parseInt(idx.replace('carouselInner', ''));

    $('#slider').flexslider(idx - 1);
    $('#carousel').flexslider(idx - 1);
});

【讨论】：