首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用jQuery将幻灯片动态添加到Bootstrap 3旋转木马

使用jQuery将幻灯片动态添加到Bootstrap 3旋转木马
EN

Stack Overflow用户
提问于 2014-06-12 14:13:02
回答 1查看 55.4K关注 0票数 26

我尝试使用jQuery将幻灯片添加到Bootstrap carousel中,但它在浏览器中不起滑块的作用。相反,它以列表视图显示图像。

代码语言:javascript
复制
<!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> 
EN

回答 1

Stack Overflow用户

发布于 2019-11-22 02:07:04

这是一个更新的答案。@avcajaraville的解决方案是在2014年编写的;在Bootstrap版本4中,他提出的概念仍然适用,但是关于类名的细节已经改变,旧的代码不能工作。

在这个解决方案中,我不关心“指示器”,指示器的添加留给了感兴趣的读者。(“指示器”是代表列表的符号,旋转木马中的每张照片都有一个“点”,当前照片的点被突出显示。)

这是HTML。这是“基本”版本。一个更健壮的版本将在这篇文章的后面出现。

代码语言:javascript
复制
<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。然后,其中一个新元素(第一个)被标记为活动(即可见)图像。

代码语言:javascript
复制
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类是仅用于屏幕阅读器的引导指示器。(屏幕阅读器是视障人士的“声音”。)

代码语言:javascript
复制
<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>元素列表。在使用指示器时,您需要在适当的(即第一个)指示器元素上设置"active“,就像@avcajaraville所做的那样。

祝你好运,玩得开心。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24177572

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档