[英]Bootstrap carousel prev/next buttons not responding
因此，这是数百万个问题的另一个实例，这些问题询问为什么Bootstrap的轮播无法正常工作。 据我所知，没有人遇到与我相同的问题。 您可能不相信我，也许我也不完全相信自己。 不管怎么说，这里去了。
因此，我的代码是从Bootstrap的轮播示例中进行的文字复制和粘贴，在此处和此处进行了一些小的更改。 随意将粘贴复制到您自己的html文件中并进行查看。 我包含了Bootstrap的CSS和javascript，还包含了jquery，并且初始化了我的轮播。 左按钮和右按钮专门不起作用。 他们的预期行为是循环浏览每个div区域中的图像，但是实际上什么也没发生。 从示例页面的源代码复制后，轮播无法正常工作，而在我进行更改后，轮播也无法正常工作。
值得注意的是，我确实看到了有关通过file：// URL查看页面的警告，并且在将代码托管到S3存储桶时，该代码也不起作用。
第一个指出为什么我愚蠢的人得到免费积分！
<!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 --> <title>Carousel Template for Bootstrap</title> <!-- Bootstrap core CSS --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script> $(function(){ $('#myCarousel').carousel(); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <!-- Carousel ================================================== --> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img class="first-slide" src="http://www.mountainprofessor.com/images/Mountain-Ranges-Colorado-2.jpg" alt="First slide" style="width:100%;height:500px;"> <div class="container"> <div class="carousel-caption"> <h1>Example headline.</h1> <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> </div> </div> </div> <div class="item"> <img class="second-slide" src="http://7-themes.com/data_images/out/50/6943013-mountain-lake.jpg" alt="Second slide" style="width:100%;height:500px"> <div class="container"> <div class="carousel-caption"> <h1>Another example headline.</h1> <p>Example text.</p> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div><!-- /.carousel --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function(){ $('#myCarousel').carousel(); }); </script> </body> </html>
检查您的浏览器控制台
你有看到
Uncaught Error: Bootstrap's JavaScript requires jQuery
看起来它没有加载Jquery 1st
脚本的顺序应如下所示
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
在Bootstrap的猫头鹰轮播旁边放置下一个/上一个按钮
[英]Positioning next/prev buttons along side of owl carousel in Bootstrap
Bootstrap Carousel自动滚动并且“ Next”和“ Prev”不起作用
[英]Bootstrap Carousel auto scroll and 'Next' and 'Prev' not working
如何在 flexbox 轮播中间正确设置 position 上一个和下一个按钮？
[英]How to correctly position prev and next buttons at the middle of flexbox carousel?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.