试图找到一种方法来使Bootstrap 3 Carousel将其显示的主图像限制为图像的自然宽度,并显示上一个和下一个图像的一部分,以在下一个/上一个箭头下将屏幕的其余部分填充到100％宽度.不太确定如何显示下一张和上一张图像的预览.
使用标准的Bootstrap轮播代码：
<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 class="carousel-inner center-block" style="width:80%;max-width:960px;" >
<div class="item active"> <img src="/images/slide-fpo.png" style="width:100%" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Slide 1</h1>
<!-- <p>Aenean a rutrum nulla. Vestibulum a arcu at nisi tristique pretium.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> -->
</div>
</div>
</div>
<div class="item"> <img src="/images/slide-fpo.png" style="width:100%" src="" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Slide 2</h1>
<!-- <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed vitae egestas purus. </p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> -->
</div>
</div>
</div>
<div class="item"> <img src="/images/slide-fpo.png" style="width:100%" src="" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>Slide 3</h1>
<!-- <p>Donec sit amet mi imperdiet mauris viverra accumsan ut at libero.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> -->
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div>
解决方法
当所有图像具有相同的宽度时,下面的代码可以工作,否则您可以执行相同的操作,但是每张幻灯片需要更复杂的计算.
首先给每个div.item三个图像(prevIoUs,current,next)：
<div class="item active">
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
<img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
<img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />
</div>
然后使用以下Less代码：
@import "bootstrap-3.3.2/less/variables";
@image-width: 600px;
.item img {
max-width:100%;
&:first-child,&:last-child {
display: none;
}
}
/* Small devices (tablets,768px and up) */
@media (min-width: @screen-sm-min) {
@rest: ((@screen-sm - ( 2 * @grid-gutter-width)) - @image-width);
.item img {
float:left;
&:first-child,&:last-child {
display: block;
}
width: @image-width;
}
.item.active {
overflow:hidden;
margin: 0 ((@image-width - (@rest / 2 ) ) * -1);
}
}
/* Medium devices (desktops,992px and up) */
@media (min-width: @screen-md-min) {
@rest: ((@screen-md - ( 2 * @grid-gutter-width)) - @image-width);
.item img {
width: @image-width;
}
.item.active {
margin: 0 ((@image-width - (@rest / 2 ) ) * -1);
}
}
/* Large devices (large desktops,1200px and up) */
@media (min-width: @screen-lg-min) {
@rest: ((@screen-lg - ( 2 * @grid-gutter-width)) - @image-width);
.item img {
width: @image-width;
}
.item.active {
margin: 0 ((@image-width - (@rest / 2 ) ) * -1);
}
}
在上面设置@ image-width到滑块图像的宽度.前面的Less代码编译成以下CSS代码：
.item img {
max-width: 100%;
}
.item img:first-child,.item img:last-child {
display: none;
}
/* Small devices (tablets,768px and up) */
@media (min-width: 768px) {
.item img {
float: left;
width: 600px;
}
.item img:first-child,.item img:last-child {
display: block;
}
.item.active {
overflow: hidden;
margin: 0 -546px;
}
}
/* Medium devices (desktops,992px and up) */
@media (min-width: 992px) {
.item img {
width: 600px;
}
.item.active {
margin: 0 -434px;
}
}
/* Large devices (large desktops,1200px and up) */
@media (min-width: 1200px) {
.item img {
width: 600px;
}
.item.active {
margin: 0 -330px;
}
}
演示：
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.item img {
max-width: 100%;
}
.item img:first-child,1200px and up) */
@media (min-width: 1200px) {
.item img {
width: 600px;
}
.item.active {
margin: 0 -330px;
}
</style>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-example-generic" data-slide-to="1"></li>
<li class="" data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listBox">
<div class="item active">
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
<img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
<img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />
</div>
<div class="item">
<img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
<img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />
<img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
</div>
<div class="item">
<img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />
<img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
</div>
<div class="item">
<img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
<img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">PrevIoUs</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>