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

Posted

技术标签:

【中文标题】使用 jQuery 将幻灯片动态添加到 Bootstrap 3 轮播【英文标题】：Add slides to Bootstrap 3 carousel dynamically using jQuery 【发布时间】：2014-08-02 09:00:25 【问题描述】：

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

<!DOCTYPE html>
<html>
<head>
<link href="Assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">        </script>
<script src="Assets/js/bootstrap.min.js"></script>
<title></title>
<script>
    onload=function()

        for(var m=3;m>=0;m--)
        
            var path="file_uploads/"+m+".jpg";
            $(".carousel-indicators").after("<li data-target='#carousel-example-generic' data-slide-to=\""+m+"\"></li>");
            $(".carousel-inner").after("<div class='item'><img src='"+path+"' alt='"+m+"'></div>");             
        

        $(".carousel-indicators li:first").addClass("active");
        $(".carousel-inner .item:first").addClass("active");
        $('.carousel').carousel();
    
</script>
</head>
<body>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
    <ol class="carousel-indicators">

    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">       

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</body>
</html>

【问题讨论】：

【参考方案1】：

首先，我将依赖 m 是一个数组，其中包含正确的图片 URL。

HTML 应该是这样的：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators"></ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner"></div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

类轮播内部是空的，您可以在其中放置图像以供轮播。

class carousel-indicatiors 也是空的，将由 JS 填充。

然后，JS来了： （正如我所说，我依赖于 m 是一个 imgs url 数组的事实）

$(document).ready(function()  
  for(var i=0 ; i< m.length ; i++) 
    $('<div class="item"><img src="'+m[i]+'"><div class="carousel-caption"></div>   </div>').appendTo('.carousel-inner');
    $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('.carousel-indicators')

  
  $('.item').first().addClass('active');
  $('.carousel-indicators > li').first().addClass('active');
  $('#carousel-example-generic').carousel();
);

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

希望对你有帮助！

编辑：我看到您还向图像输出了 alt 标记，但我的答案不需要这些东西，我敢打赌您可以毫无问题地做到这一点。

【讨论】：

警告：对于 Bootstrap 版本 4，有一些变化。 v3 与 v4 中有几个类不同，并且代码不可互换。概念相同，但类名不同。【参考方案2】：

你可以试试这个。

标记

<div id="carousel-deck" class="carousel slide" data-ride="carousel"
    data-interval="false" data-wrap="false">
    <ol class="carousel-indicators">
    </ol>
    <div class="carousel-inner">
    </div>
    <a class="left carousel-control" href="#carousel-deck"
        data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span><span
            class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-deck"
        data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span><span
            class="sr-only">Next</span>
    </a>
</div>

JS

var markup = '';
for (var index = 0; index < count; index++) 
    markup += '<li data-target="#carousel-deck" data-slide-to="' + index + '"></li>';

$('#carousel-deck .carousel-indicators').html(markup);
markup = '';
for (var index = 0; index < count; index++) 
    markup += '<div class="item">';
    markup += '<img src="/images/uploads/' + file.uuid + '/slides/slide_' + (index + 1) + '.jpg" style="width:100%;">'
    markup += '</div>';

$('#carousel-deck .carousel-inner').html(markup);
$('#carousel-deck .item').first().addClass('active');
$('#carousel-deck .carousel-indicators > li').first().addClass('active');
$('#carousel-deck').carousel(
    pause: true,
    interval: false
);

【讨论】：

第 4 版的类名已更改。您的代码应保留，因为有些人仍在使用第 3 版。另请参阅下面的我的帖子。【参考方案3】：

这是一个更新的答案。 @avcajaraville 的解决方案写于 2014 年；对于 Bootstrap 版本 4，他提出的概念仍然适用，但有关类名称的详细信息已更改，旧代码将无法工作。

在这个解决方案中，我不关心“指标”，指标的添加留给感兴趣的读者。 （“指标”是代表列表的符号，轮播中每张照片都有一个“点”，当前照片的点被突出显示。）

这里是 HTML。这是“准系统”版本。这篇文章后面会出现一个更强大的版本。 

<div id="myCarousel" class="carousel slide" >
    <div class="carousel-inner" role="listbox">
    </div> 
</div>

请注意，我省略了属性 data-ride="carousel";等效项在通过 javascript 传递的配置选项中表示。这符合最新的文档。

这里是 JavaScript。为了多样化，这段代码与@avcajarville 的不同之处在于大部分不使用 jQuery。另一方面，Bootstrap 的接口仅通过 jQuery，这就是您在这段代码的最后一行看到的内容。

假设一个名为recs 的数组是一个对象列表，其中每个对象都包含有关照片的信息，包括文件名和一些描述性文本。对于每个rec，都会生成一个html字符串，并将其推送到数组itemHtmlStrings上。这些字符串然后成为carousel-inner 元素的innerHTML。然后，其中一个新元素（第一个）被标记为 active（即可见）图像。

var itemHtmlStrings = [];
for(var rec of recs) 
  var itemHtmlString = ''
    +'<div class="carousel-item">'
    + `<img class="d-block w-100" `
    +       ` src="photo/$rec.name" >`
    +  `<div class="carousel-caption">`
    +    `<h3>$rec.captionHdr</h3>`
    +    `<p>$rec.captionText</p>`
    +  '</div>'
    +'</div>'
  itemHtmlStrings.push(itemHtmlString);

var myCarouselEl = document.getElementById("myCarousel");
var carouselInnerEl = myCarouselEl.getElementsByClassName("carousel-inner")[0];
carouselInnerEl.innerHTML = itemHtmlStrings.join("\n");
carouselInnerEl.firstElementChild.className += " active";
$(myCarouselEl).carousel(slide : true, ride : true );

不幸的是，在编写完这段代码后，我决定 Bootstrap 提供的 Carousel 不适合我。如果您的唯一要求是在一组枚举图像中旋转并一次只显示一个，则此代码是可以的。我没有使用此代码，因为我需要显示多个图像，而 Bootstrap 似乎没有这样做。此外，我遇到了问题，因为我的图像并不完全相同。有些需要在负载时旋转；这是 Bootstrap Carousel 中的一个问题。另外，我不确定它处理大小和纵横比的多样性的能力如何。

我承诺了 HTML 的非基本版本，所以就在这里。这包括允许用户请求上一张和下一张幻灯片的按钮。此外，它还包括aria-hidden 属性和sr-only 跨度；这些是屏幕阅读器的代码。 sr-only 类是 screen-reader-only 的 Bootstrap 指示器。 （屏幕阅读器是视障人士的“声音”。）

<div id="myCarousel" class="carousel slide" >
    <div class="carousel-inner" role="listbox">
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true" style="background-color:black; color:white;"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true" style="background-color:black; color:white; font-size=x-large"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

要添加指标，请将&lt;ol class="carousel-indicators"&gt;&lt;/ol&gt; 放在carousel-inner 之前，并调整JavaScript 代码以插入&lt;li&gt; 元素列表。使用指标时，您需要在适当的（即第一个）指标元素上设置“活动”，正如 @avcajaraville 所做的那样。

祝你好运，玩得开心。

【讨论】：

【参考方案4】：

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

即

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

暂停：当鼠标指针进入轮播时暂停轮播通过下一张幻灯片，当鼠标指针离开轮播时继续滑动。

换行：指定轮播是连续遍历所有幻灯片，还是在最后一张幻灯片处停止

供您参考：

更多详情请click here...

希望对你有帮助:)

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

【讨论】：

以上是关于使用 jQuery 将幻灯片动态添加到 Bootstrap 3 轮播的主要内容，如果未能解决你的问题，请参考以下文章

动态添加 optgroup 列表

将自动播放添加到基本的 jquery 滑块

JQuery 工具可滚动：无法将超链接添加到图像

将新图像添加到 Fotorama 幻灯片

JQuery Mobile - 转换前动态加载页面

使用 jquery 拉入“下一个”内容