bxSlider在动态内容上无法正常工作

Question

我正在使用bxslider。但它无法正常工作

HTML

<ul class="bxslider" id="opList">

</ul>

JS

 $('.bxslider').bxSlider({
         autoControls: true,
          minSlides: 1,
          maxSlides: 3,
          slideWidth: '100%',
          slideMargin: 10,
     });


    for(var i=0; i<=5;i++)
    {
        var opLi = $('<li><img src="img/surgeries.png"></li>'); 
        $('#opList').append(opLi);  
    }

将列表设置为静态时，它可以正常工作。

但是当我动态给予li时它不起作用

Answer 1

这可能会解决问题

＆＃13;

＆＃13;

var slider = $('.bxslider').bxSlider({
  mode: 'horizontal'
});

$('#reload-slider').click(function(e){
  e.preventDefault();
  $('.bxslider').append('<li><img src="/images/730_200/trees.jpg"></li>');
  slider.reloadSlider();
});

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将bxslider代码移到其他代码下面即可。这样，您的动态列表将在bxslider加载之前填充。