Question

我正在使用Bxslider来显示我的图像，它对预定义的图像工作正常。但是现在，我想从URL动态获取图像。

我使用的代码如下：

$('.bxslider').bxSlider({
        onSlideNext : function($slideElement, oldIndex, newIndex){
            $.get(myUrl,'',function(response){
                  $('.bxslider').html(response);
            });
      }
    });

并且将图像附加到滑块，但滑块不包含这些图像。我也尝试使用reload

var slider = $('.bxslider').bxSlider({
        onSlideNext : function($slideElement, oldIndex, newIndex){
            //do your ajax here, for example:
            $.get(site_url + 'content/content/test','',function(response){
                  $('.bxslider').append(response);
                      slider.reloadSlider();
            });
      }
    });

但仍在工作。任何人都建议我解决方案吗？

Answer 1

滑块在初始化期间加载幻灯片。如果未使用reloadSlider（），则滑块不知道添加了新幻灯片。还有一个newIndex属性可以设置下一张幻灯片。

newIndex：目标幻灯片的元素索引（在。之后）过渡）

因此，当您在幻灯片放映结束时单击Next，然后newIndex = 0，甚至您将使用reloadSlider（），您将转到幻灯片＃0。这里唯一的方法是使用goToSlide（）

slider.reloadSlider();
slider.goToSlide(oldIndex+1);

演示：http://jsfiddle.net/Gg2Sk/

一般来说，在每张新幻灯片上重新加载滑块的想法都不是很好。您可能会考虑最初加载所有幻灯片，但在不可见之前不要加载图像。

具有动态内容的滑块无效

1 个答案: