使用jQuery动态添加幻灯片到Bootstrap 3轮播

我正在尝试使用jQuery将幻灯片添加到Bootstrap轮播，但它并不是浏览器中的滑块。 相反，它在列表视图中显示图像。

         onload=function(){ for(var m=3;m>=0;m--) { var path="file_uploads/"+m+".jpg"; $(".carousel-indicators").after("
"); $(".carousel-inner").after("
"); } $(".carousel-indicators li:first").addClass("active"); $(".carousel-inner .item:first").addClass("active"); $('.carousel').carousel(); }    
  
 
  
 
        
   

Answer 1

首先，我将依赖于m是一个具有适当URL的数组的事实。

HTML应该是这样的：

类旋转木马内部是空的，你可以在那里放置你的图像然后旋转木马。

类旋转木马指示器也是空的，将由JS填充。

接下来是JS :(正如我所说，我依赖的事实是m是一个imgs url数组）

 $(document).ready(function(){ for(var i=0 ; i< m.length ; i++) { $('
 
').appendTo('.carousel-inner'); $('
').appendTo('.carousel-indicators') } $('.item').first().addClass('active'); $('.carousel-indicators > li').first().addClass('active'); $('#carousel-example-generic').carousel(); }); 

基本上，您将所有图像附加到类carousel-inner，添加轮播控件li，然后将活动类添加到第一个图像和第一个轮播指示符li。，最后，初始化您的轮播。 请注意，所有这些都在文档就绪函数中，这是您所缺少的 。 你所做的只是定义一个名为onload的函数

希望能帮助到你 ！

编辑：我看到你也输出了alt标签给图像，但那不需要我的答案，我打赌你可以毫无问题地做到这一点。

Answer 2

好吧，Bootstrap Carousel有各种控制参数。

即

间隔：指定每张幻灯片之间的延迟（以毫秒为单位）。

暂停：当鼠标指针进入旋转木马时，暂停旋转木马通过下一张幻灯片，并在鼠标指针离开旋转木马时恢复滑动。

wrap：指定轮播是否应连续浏览所有幻灯片，或者在最后一张幻灯片处停止

供你参考：

更多详情请点击这里…

希望对你有帮助 ：）

注意：这是为了进一步的帮助。我的意思是如何在加载轮播后自定义或更改默认行为。