[英]creating carousel using bootstrap
i want to create a carousel using bootstrap, i use the exact code from website but it doesn't rotate the slides and the slide and div position are not right. 我想使用自举程序创建轮播,我使用网站上的确切代码,但它不会旋转幻灯片,并且幻灯片和div的位置不正确。 what changes i should apply to bootstrap code to make it work?
我应该对引导程序代码进行哪些更改以使其起作用?
enter code here
<div id="carousel-example-generic" class="carousel slide" data- ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
`enter code here`</div>
first add bootstrap css, jquery and bootstrap js. 首先添加bootstrap css,jquery和bootstrap js。 then add html code after that initialize the carousel by:-
然后在通过以下方式初始化轮播之后添加HTML代码:-
$('.carousel').carousel();
where you have ... 你在哪里...
you need to include your images via <img>
or via <divs>
using the background-size cover class. 您需要使用背景尺寸封面类通过
<img>
或通过<divs>
包括图像。 like the following; 像下面这样;
<div class="carousel-inner">
<div class="active item">
<div style="background:url(/images/1.jpg) center center;
background-size:cover;" class="slider-size">
</div>
then add the following CSS: 然后添加以下CSS:
.slider-size {
height: 300px; /* This is your slider height */
}
.carousel {
width:100%; /* changes the width of the carousel on the page */
margin:0 auto; /* center your carousel if other than 100% */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.