堆栈内存溢出
  简体   繁体   English

如何让 bootstrap carousel 滑动？

[英]How do I get bootstrap carousel to slide?

 原文  2019-12-09 05:47:18  8   3    javascript/ html/ bootstrap-4

问题描述

my carousel will not change slides.我的轮播不会改变幻灯片。 The actual carousel will open on my site, but I am unable to click the right or left indicators to change to a different slide.实际的轮播将在我的网站上打开，但我无法单击右侧或左侧指示器以更改为不同的幻灯片。 I am not sure what I am doing wrong.我不确定我做错了什么。 I've tried changing my java script commands.我试过更改我的 java 脚本命令。 I've tried deleting and restarting my carousel, but no luck.我试过删除并重新启动我的轮播，但没有运气。 

 ("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>

3 个解决方案

解决方案1
 3  2019-12-09 05:51:56

Here is the simple example of bootstrap carousel that you can refer这是您可以参考的 bootstrap carousel 的简单示例

Codepen Link: Click me 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>

解决方案2
 1  2019-12-09 06:01:45

You need to use jQuery '$' along with # to call carousel() functions;您需要使用 jQuery '$' 和#来调用carousel()函数；

Replace ("carousel").carousel();替换("carousel").carousel(); with $("#carousel").carousel();与$("#carousel").carousel();

解决方案3
 0  2019-12-09 07:54:06

first of all remove ("carousel").carousel();首先删除("carousel").carousel(); from your code this is not required.从您的代码中，这不是必需的。

and second one is that you need to complete your two </div> before </body> complete.第二个是你需要在</body>完成之前完成你的两个</div> 。

and third one is you have to define footer inside of your body right now it is outside of your body.第三个是你现在必须在你的body内部定义页脚，它在你的身体之外。

and the last one you have to use the proper online CDNs for all external files right now it gives error.最后一个你现在必须对所有外部文件使用正确的在线 CDN，它会出错。

follow the below snippet for more understanding.请按照以下代码段进行操作以获得更多理解。 

 <!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>

I hope this answer will fulfill your all requirements and helpful to solve your problem.我希望这个答案能满足您的所有要求并有助于解决您的问题。

Thank you...谢谢...

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将循环中的每个结果附加到他自己的幻灯片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? 我如何让 img-fluid 在 Bootstrap Carousel 中工作？ - How do i get img-fluid to work in Bootstrap Carousel? 如果为 false，bootstrap 4 carousel 不会移动到另一张幻灯片 - bootstrap 4 carousel do not move to another slide if false 如何为Slick轮播中的当前幻灯片更新CSS？ - How do I update the CSS for the current slide in the Slick carousel? 如何在手机中停止引导轮播自动滑动 - How to stop bootstrap carousel automatic slide in mobile 如何使用JavaScript手动滑动启动轮播 - How to slide bootstrap carousel manually using JavaScript 如何定位引导轮播的活动幻灯片？ - How to target bootstrap carousel's active slide? 如何为bootstrap轮播设置活动幻灯片？ - How to set active slide for bootstrap carousel?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM