Question

当我试图在php页面中实现时，我的轮播无法正常工作.. ?? 但它在bootsnipp中工作正常。以下是代码段的链接。

下面是

包含的详细信息。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

下面是我的HTML代码

      <div class="container">
<div class="row">
    <div class="col-md-4">
        <!-- Carousel
        ================================================== -->
        <div id="myCarousel" class="carousel slide">        
            <div class="carousel-inner">           
                <div class="item active"> 
                    <a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide1"></a>
                    <div class="caption">
                      <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
                    </div>
                </div>
                <div class="item"> 
                    <a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide2"></a>
                    <div class="caption">
                      <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
                    </div>                                                           
                 </div>  
                <div class="item"> 
                    <a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide3"></a>
                    <div class="caption">
                      <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
                    </div>                        
                </div>                                                                                   
            </div>
             <!-- 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>                                                                 
        </div><!-- End Carousel -->  
    </div>
</div>

以下是我的CSS

    body { padding-top: 50px; }

 .carousel-indicators {
bottom:-40px;
left:0;
width:100%;
background:#ccc;
padding: 6px 0px;
margin-left:0;
border-top:2px solid #fff;
  }
   .carousel-indicators li {
width:12px;
height:12px;    
background:#fff;
border-color:#fff;

 }
 .carousel-indicators .active {
width:14px;
height:14px;
background:#428bca;
border-color:#428bca;
 }
   .carousel-inner .thumbnail {
margin-bottom:0;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
   }
  .carousel-inner .caption {
background:#ddd;
padding: 10px;
}

以下是我的脚本代码

    $('#myCarousel').carousel({
    interval:   1000
});

如果我错过了任何图书馆链接，请提前通知我

Answer 1

Bootstrap的JavaScript需要jQuery。在bootstrap.min.js之前加载jquery

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
    <script>

Answer 2

尝试这个工作snipet

$('#myCarousel').carousel({
    interval:   1000
});

body { padding-top: 50px; }

 .carousel-indicators {
bottom:-40px;
left:0;
width:100%;
background:#ccc;
padding: 6px 0px;
margin-left:0;
border-top:2px solid #fff;
  }
   .carousel-indicators li {
width:12px;
height:12px;    
background:#fff;
border-color:#fff;

 }
 .carousel-indicators .active {
width:14px;
height:14px;
background:#428bca;
border-color:#428bca;
 }
   .carousel-inner .thumbnail {
margin-bottom:0;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
   }
  .carousel-inner .caption {
background:#ddd;
padding: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row">
    	<div class="col-md-4">
            <!-- Carousel
            ================================================== -->
            <div id="myCarousel" class="carousel slide">        
                <div class="carousel-inner">           
                    <div class="item active"> 
                    	<a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide1"></a>
                        <div class="caption">
                       	  <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
                        </div>
                    </div>
                    <div class="item"> 
                    	<a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide2"></a>
                        <div class="caption">
                       	  <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
                        </div>                                                           
                     </div>  
                    <div class="item"> 
                    	<a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide3"></a>
                        <div class="caption">
                       	  <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
                        </div>                        
                    </div>                                                                                   
                </div>
                 <!-- 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>                                                                 
            </div><!-- End Carousel -->  
    	</div>
    </div>
</div>

问候！

旋转木马不工作..？

2 个答案: