Question

我正在尝试使用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>

Answer 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>

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

类轮播指示器也是空的，将由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标签给图像，但那不需要我的回答，我打赌你可以毫无问题地做到这一点。

Answer 2

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

即

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

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

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

供您参考：

更多详情，请click here...

希望这会对你有所帮助:)。

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

Answer 3

您可以尝试一下。

标记

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

Answer 4

这是最新的答案。 @avcajaraville的解决方案写于2014年。在Bootstrap第4版中，他提出的概念仍然适用，但是有关类名的详细信息已更改，旧代码将无法使用。

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

这是HTML。这是“裸骨”版本。一个更强大的版本出现在本文的后面。

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

请注意，我省略了属性data-ride =“ carousel”;等效表示为通过JavaScript传递的config选项。这符合最新文档。

这是JavaScript。出于多样性的考虑，此代码与@avcajarville的代码不同，因为它们大多不使用jQuery。另一方面，Bootstrap的接口仅通过jQuery，这就是您在代码最后一行看到的内容。

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

var itemHtmlStrings = [];
for(var rec of recs) {
  var itemHtmlString = ''
    +'<div class="carousel-item">'
    + `<img class="d-block w-100" `
    +       ` src="photo/${rec.name}" alt="photo of ${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类是仅屏幕读取器的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>

要添加指标，请将<ol class="carousel-indicators"></ol>放在carousel-inner之前，然后调整JavaScript代码以插入<li>元素列表。使用指标时，您需要像@avcajaraville一样，在相应的指标元素（即第一个指标）上设置“有效”。

祝你好运，玩得开心。

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

4 个答案: