gpt4 book ai didi

javascript - Bootstrap 轮播不显示所有图像

转载 作者:太空宇宙 更新时间:2023-11-03 18:15:55 24 4
gpt4 key购买 nike

这些按钮在我的 bootstrap carousel 上不起作用,它也不会转到其他图像。我没有更改 Bootstrap CSS 或 JavaScript 中与轮播相关的任何内容。

到目前为止,这是我的代码:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="myCarousel" data-slide-to="0" class="active"></li>
<li data-target="myCarousel" data-slide-to="1"></li>
<li data-target="myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img src="images/oldman1.jpg" alt="First slide" style="height: 50%; width: 100%; display: block;">
<div class="container">
<div class="carousel-caption">
<h1>Generations Apart</h1>
<p>An Empathic Photo Essay</p>
<button type="button" class="btn btn-default"><a href="Childhood.html">Begin</a> </button>
</div>
</div>
</div>
<div class="item"><img src="images/oldman2.jpg" alt="Third slide" style="height: 50%; width: 100%; display: block;">
<div class="container">
<div class="carousel-caption">
<h1>Generations Apart</h1>
<p>An Empathic Photo Essay</p>
<button type="button" class="btn btn-default"><a href="Childhood.html">Begin</a></button>
</div>
</div>
</div>
<div class="item"><img src="images/oldman.jpg" alt="Third slide" style="height: 50%; width: 100%; display: block;">
<div class="container">
<div class="carousel-caption">
<h1>Generations Apart</h1>
<p>An Empathic Photo Essay</p>
<button type="button" class="btn btn-default"><a href="Childhood.html">Begin</a></button>
</div>
</div>
</div>
</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

JS/CSS 链接:

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<link href="css/custom.css" type="text/css" rel="stylesheet"/>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet"/>
<title>Generations Apart</title>
</head>

最佳答案

http://www.bootply.com/127038

很抱歉,正如您在此处看到的那样,您的代码运行良好,并且可以毫无问题地运行轮播。

您确定要链接的 JS 和 CSS 文件正是您要链接到的位置吗?

关于javascript - Bootstrap 轮播不显示所有图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22835605/

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