gpt4 book ai didi

javascript - 具有动态内容的 slider 不起作用

转载 作者:行者123 更新时间:2023-12-03 12:28:36 24 4
gpt4 key购买 nike

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

我使用的代码如下:

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

将图像附加到 slider ,但 slider 不包含这些图像。我也尝试过重新加载,例如

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();
});
}
});

但仍在工作。有人能给我建议任何解决方案吗?

最佳答案

slider 在初始化期间加载幻灯片。如果未使用 reloadSlider() ,则 slider 不知道添加了新幻灯片。还有一个 newIndex 属性用于设置下一张幻灯片。

newIndex: element index of the destination slide (after the transition)

因此,当您单击幻灯片末尾的“下一步”时,newIndex=0,甚至您将使用 reloadSlider(),您将转到幻灯片#0。这里唯一的方法是使用 goToSlide()

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

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

一般来说,在每张新幻灯片上重新加载 slider 的想法根本不好。您可能会考虑首先加载所有幻灯片,但在图像不可见之前不要加载图像。

关于javascript - 具有动态内容的 slider 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24054348/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com