【发布时间】：2017-06-01 15:23:25
【问题描述】：
尝试在 php 页面中实现时，我的轮播不工作..?? 但它在 bootsnipp 中运行良好。下面是 sn-p 代码的链接。
https://bootsnipp.com/snippets/3qPxB
以下是包含的包裹详情。
<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
});
如果我错过了任何图书馆链接，请提前通知我，谢谢
【问题讨论】：
-
您没有包含引导 JS 库。您只包含了 CSS。
-
添加 bootstrap.min.js 文件。
-
我没有看到你包括
"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"在jquery脚本之后包含它 -
@RoryMcCrossan..现在我也包含了引导 js，但它不起作用..
-
标签： jquery html css twitter-bootstrap bootstrap-modal