gpt4 book ai didi

html - Bootstrap Carousel 拒绝工作

转载 作者:行者123 更新时间:2023-11-28 03:37:30 25 4
gpt4 key购买 nike

我已经尝试了所有方法,包括直接来自 ww3 本身的代码,并添加了 cdn。它在 bootstrap 4 beta 上工作,但我网站上的其他所有东西都在早期版本上工作,我对运行时间是新的和迷信的;如果不需要,我不想把它们都包括在内

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>



<div id="myCarousel" class="carousel slide" data-ride="myCarousel">

<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" role="listbox">
<div class="item active">
<img src="https://media.galaxant.com/000/462/866/desktop-1462221325.png" alt="spacious tent">
</div>
<div class="item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/98/4f/f8/984ff8bea911ffb5977635185d79396e.jpg" alt="lots of head room">
</div>
<div class="item">
<img src="http://kitchenfunwithmy3sons.com/wp-content/uploads/2016/04/the-best-camping-ideas-hacks-gear-tips-and-tricks-37.jpg" alt="no bull crap">
</div>
</div>
<!--End listbox-->

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

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


<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</div>

</body>

最佳答案

您的 JQuery 版本有一些问题。尝试使用一些旧版本。出于演示目的,我将其替换为 vers.2.1 并且它正在运行。而且您不需要重复您的 CSS 链接

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<body>



<div id="myCarousel" class="carousel slide" data-ride="myCarousel">

<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" role="listbox">
<div class="item active">
<img src="https://media.galaxant.com/000/462/866/desktop-1462221325.png" alt="spacious tent">
</div>
<div class="item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/98/4f/f8/984ff8bea911ffb5977635185d79396e.jpg" alt="lots of head room">
</div>
<div class="item">
<img src="http://kitchenfunwithmy3sons.com/wp-content/uploads/2016/04/the-best-camping-ideas-hacks-gear-tips-and-tricks-37.jpg" alt="no bull crap">
</div>
</div>
<!--End listbox-->

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

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


<!-- Latest compiled and minified JavaScript -->
</div>

关于html - Bootstrap Carousel 拒绝工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44394312/

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