我的Bootstrap轮播无法正常工作
[英]My Bootstrap carousels are not working
问题描述
我的Bootstrap轮播无法正常工作。 当我单击向左滑块或向右滑块按钮时，网页仅向下移动，并且#bannerCarousel出现在浏览器地址栏中。 至于“推荐”轮播，它应该是自动播放的，但是它什么也没做。 有人可以帮我解决这个问题吗？
这是我的HTML和Javascript：
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(function(){ $('.carouselBanner').carousel(), $('.carouselTestimonial').carousel() }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>RialedUp</title> <link rel="stylesheet" href="css/bootstrap.css" type="text/css" /> <link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <section class="hero-unit"> <div class="container"> <div class="navbar"> <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a href="#" class="brand">RialedUp</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> </div><!-- end navbar --> <div id="bannerCarousel" class="carouselBanner slide"> <div class="carousel-inner"> <div class="active-item"> <div class="hero-unit-inner text-center"> <h1>We build well designed websites</h1> <h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4> <a href="#" class="btn btn-primary btn-large">Get Started!</a> <a href="#">Learn More</a> <div> </div> <img src="img/browser.png" alt="Browser" /> </div><!-- end hero-unit-inner --> </div><!-- end item --> <div class="item"> <div class="hero-unit-inner text-center"> <h1>We build well designed websites</h1> <h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4> <a href="#" class="btn btn-primary btn-large">Get Started!</a> <a href="#">Learn More</a> <img src="img/browser.png" alt="Browser" /> </div><!-- end hero-unit-inner --> </div><!-- end item --> <div class="item"> <div class="hero-unit-inner text-center"> <h1>We build well designed websites</h1> <h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4> <a href="#" class="btn btn-primary btn-large">Get Started!</a> <a href="#">Learn More</a> <img src="img/browser.png" alt="Browser" /> </div><!-- end hero-unit-inner --> </div><!-- end item --> </div><!-- end carousel inner --> <a class="carousel-control left" href="#bannerCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#bannerCarousel" data-slide="next">›</a> </div><!-- end bannerCarousel --> </div> </section><!-- end hero-unit --> <section id="process"> <div class="container"> <div class="row"> <div class="h-line hidden-phone"> </div> <div class="span3"> <div class="plan text-center"> <span class="process-icon iplan"> </span> <h4 class="heading">Plan</h4> <p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p> <a href="#" class="btn">Read More</a> </div> </div> <div class="span3"> <div class="design text-center"> <span class="process-icon idesign"> </span> <h4 class="heading">Design</h4> <p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p> <a href="#" class="btn">Read More</a> </div> </div> <div class="span3"> <div class="develop text-center"> <span class="process-icon idevelop"> </span> <h4 class="heading">Develop</h4> <p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p> <a href="#" class="btn">Read More</a> </div> </div> <div class="span3"> <div class="launch text-center"> <span class="process-icon ilaunch"> </span> <h4 class="heading">Launch</h4> <p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p> <a href="#" class="btn">Read More</a> </div> </div> </div> </div> </section><!-- end process --> <section id="portfolio"> <div class="container"> <div class="row"> <div class="span3"> <div class="p-item"> <h4 class="heading">Portfolio</h4> <p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p> <strong><a href="#">Our Portfolio</a></strong> </div> </div> <div class="span3"> <div class="p-item"> <div class="text-center"> <img src="img/thumbnail/thumb-1.png" class="img-polaroid" alt="Web Design" /> <h5 class="title">LeafireDesigns</h5> <small class="category">Web Design</small> </div> </div> </div> <div class="span3"> <div class="p-item"> <div class="text-center"> <img src="img/thumbnail/thumb-2.png" class="img-polaroid" alt="Web Development" /> <h5 class="title">Unity</h5> <small class="category">Web Development</small> </div> </div> </div> <div class="span3"> <div class="p-item"> <div class="text-center"> <img src="img/thumbnail/thumb-3.png" class="img-polaroid" alt="Logo Design" /> <h5 class="title">Ingenious</h5> <small class="category">Logo Design</small> </div> </div> </div> </div> </div> </section><!-- end portfolio --> <section id="partners"> <div class="container"> <div class="row"> <div class="span3 text-center"> <img src="img/thumbnail/partner-1.png" alt="Graphic Driver" /> </div> <div class="span3 text-center"> <img src="img/thumbnail/partner-2.png" alt="Theme Forest" /> </div> <div class="span3 text-center"> <img src="img/thumbnail/partner-3.png" alt="Code Canyon" /> </div> <div class="span3 text-center"> <img src="img/thumbnail/partner-4.png" alt="Active Den" /> </div> </div> </div> </section><!-- end partners --> <section id="widgets"> <div class="container"> <div class="row"> <div class="span4"> <div class="testimonials"> <h4 class="heading">Testimonials</h4> <div id="testimonialCarousel" class="carouselTestimonial"> <div class="carousel-inner"> <div class="active item"> <img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" /> <blockquote> <p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p> <cite>Moe Ron <br /> <a href="#">www.moron.com</a> </cite> </blockquote> </div> <div class="item"> <img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" /> <blockquote> <p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p> <cite>Moe Ron <br /> <a href="#">www.moron.com</a> </cite> </blockquote> </div> <div class="item"> <img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" /> <blockquote> <p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p> <cite>Moe Ron <br /> <a href="#">www.moron.com</a> </cite> </blockquote> </div> </div><!-- end carousel-inner --> </div><!-- end testimonialCarousel --> </div><!-- end testimonials --> </div> <div class="span4"> <div class="blog"> <h4 class="heading">Our Latest Posts</h4> <ul class="blog-lists"> <li> <h5><a href="#">This is Photoshops version of Lorem Ipsum</a></h5> <small>October 4, 2017 | Posted by <a href="#">Admin</a></small> </li> <li> <h5><a href="#">This is Photoshops version of Lorem Ipsum</a></h5> <small>October 3, 2017 | Posted by <a href="#">Admin</a></small> </li> <li> <h5><a href="#">This is Photoshops version of Lorem Ipsum</a></h5> <small>October 2, 2017 | Posted by <a href="#">Admin</a></small> </li> </ul> </div><!-- end blog --> </div> <div class="span3"> <div class="tweets"> <h4 class="heading">Latest Tweets</h4> <ul class="tweet-lists"> <li class="clearfix"> <img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" /> <p>Proin gravida nibh vel velit auctor a iquet. <a href="#">http://this.is.me247</a></p> </li> <li class="clearfix"> <img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" /> <p>Proin gravida nibh vel velit auctor a iquet. <a href="#">http://this.is.me247</a></p> </li> <li class="clearfix"> <img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" /> <p>Proin gravida nibh vel velit auctor a iquet. <a href="#">http://this.is.me247</a></p> </li> </ul> </div><!-- end tweets--> </div> </div> </div> </section><!-- end widgets --> <footer> <div class="container"> <div class="row"> <div class="span12 text-center"> <div class="table"> <ul class="footer-links"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div id="social"> <a href="#" class="btn twitter"><span class="social-sprite twitter"> </span>Follow Us on Twitter</a> <a href="#" class="btn facebook"><span class="social-sprite facebook"> </span>Like Us on Facebook</a> </div> <small> © <a href="#">Rialed Up </a>2017</small> </div> </div> </div> </footer>
1 个解决方案
解决方案1
0 2017-10-10 04:38:25
更改
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active-item">
至
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active item"> <!-- active item not active-item -->
Bootstrap 轮播冻结
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.