Question

我的Bootstrap旋转木马不工作。当我单击左侧滑块或右侧滑块按钮时，网页向下移动并且#bannerCarousel出现在浏览器地址栏中。至于“Testimonials”旋转木马，它应该自动播放，但它不会做任何事情。有人可以帮我解决这个问题吗？

这是我的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>&nbsp;</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">&lsaquo;</a>
                <a class="carousel-control right" href="#bannerCarousel" data-slide="next">&rsaquo;</a>
            </div><!-- end bannerCarousel --> 
            
            
            
        </div>       
    </section><!-- end hero-unit -->
    
    <section id="process">
        <div class="container">
            <div class="row">
            
                <div class="h-line hidden-phone">&nbsp;</div>
                <div class="span3">
                    <div class="plan text-center">
                        <span class="process-icon iplan">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</span>Follow Us on Twitter</a>
                    <a href="#" class="btn facebook"><span class="social-sprite facebook">&nbsp;</span>Like Us on Facebook</a>
                </div>
                
                <small> &copy; <a href="#">Rialed Up </a>2017</small>
                </div>
                
            </div>
        </div>
    </footer>

Answer 1

更改

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

https://jsfiddle.net/jv6xzgm6/

我的Bootstrap轮播无法正常工作

1 个答案: