[英]How do I get bootstrap carousel to slide?
我的轮播不会改变幻灯片。 实际的轮播将在我的网站上打开，但我无法单击右侧或左侧指示器以更改为不同的幻灯片。 我不确定我做错了什么。 我试过更改我的 java 脚本命令。 我试过删除并重新启动我的轮播，但没有运气。
("carousel").carousel();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Home Page</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="styles/restaurantStyles.css" /> <script> </script> <style> </style> </head> <body onload="alert('This website is best viewed with JavaScript enabled. Please check your settings to ensure JavaScript is enabled before proceeding');"> <div class="container"> <div class="jumbotron jumbotron-fluid"> <div id="carousel" class="carousel slide carousel" data-ride="carousel" style="width: 400px;"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="images/newLoc.png" alt="newLoc"> </div> <div class="carousel-item"> <img class="d-block w-100" src="images/Seasonal.png" alt="Seasonal Menu"> </div> <div class="carousel-item"> <img class="d-block w-100" src="images/drink.png" alt="SG Brew"> </div> </div> <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q81/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> <footer> <hr /> <p> 305 Gray Street, Houston, TX, 77004 <br /> 713-555-6752</p> </footer> </html>
这是您可以参考的 bootstrap carousel 的简单示例
Codepen 链接：点我
h2{ margin: 0; color: #666; padding-top: 90px; font-size: 52px; font-family: "trebuchet ms", sans-serif; } .item{ background: white; text-align: center; height: 300px !important; } .carousel{ margin-top: 20px; } .bs-example{ margin: 20px; } .carousel.carousel-fade .item { opacity:0; filter: alpha(opacity=0); /* ie fix */ } .carousel.carousel-fade .active.item { opacity:1; filter: alpha(opacity=100); /* ie fix */ }
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <div class="bs-example"> <div id="myCarousel" class="carousel slide" data-interval="6500" data-ride="carousel"> <!-- 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> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item carousel-fade"> <h2>Slide 1</h2> <div class="carousel-caption"> <h3>First slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="item carousel-fade"> <h2>Slide 2</h2> <div class="carousel-caption"> <h3>Second slide label</h3> <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p> </div> </div> <div class="item carousel-fade"> <h2>Slide 3</h2> <div class="carousel-caption"> <h3>Third slide label</h3> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div>
您需要使用 jQuery '$' 和#来调用carousel()函数；
替换("carousel").carousel(); 与$("#carousel").carousel();
首先删除("carousel").carousel(); 从您的代码中，这不是必需的。
第二个是你需要在</body>完成之前完成你的两个</div> 。
第三个是你现在必须在你的body内部定义页脚，它在你的身体之外。
最后一个你现在必须对所有外部文件使用正确的在线 CDN，它会出错。
请按照以下代码段进行操作以获得更多理解。
<!DOCTYPE html> <html> <head> <title>Demo Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body onload="alert('This website is best viewed with JavaScript enabled. Please check your settings to ensure JavaScript is enabled before proceeding');"> <div class="container"> <div class="jumbotron jumbotron-fluid"> <div id="carousel" class="carousel slide carousel" data-ride="carousel" style="width: 400px;"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="images/newLoc.png" alt="newLoc"> </div> <div class="carousel-item"> <img class="d-block w-100" src="images/Seasonal.png" alt="Seasonal Menu"> </div> <div class="carousel-item"> <img class="d-block w-100" src="images/drink.png" alt="SG Brew"> </div> </div> <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> <footer> <hr /> <p> 305 Gray Street, Houston, TX, 77004 <br /> 713-555-6752</p> </footer> </body> </html>
我希望这个答案能满足您的所有要求并有助于解决您的问题。
谢谢...
如何将循环中的每个结果附加到他自己的幻灯片jQuery Bootstrap轮播中？
[英]How do i append every result from loop in his own slide jQuery Bootstrap carousel?
如何在Bootstrap 3.3.4中获取轮播的总数和当前幻灯片数量
[英]How to Get total and Current Slide Number of Carousel in Bootstrap 3.3.4
如何使文本显示在该引导轮播中的叠加层上方？
[英]How do I get the text to show above the overlay in this bootstrap carousel?
如果为 false，bootstrap 4 carousel 不会移动到另一张幻灯片
[英]bootstrap 4 carousel do not move to another slide if false
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.