Question

试图找到一种方法让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%" data-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%" data-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>

Answer 1

下面的代码适用于所有图像宽度相同的情况，否则您可以执行相同操作，但每张幻灯片需要更复杂的计算。

首先给每个div.item三个图像（上一个，当前一个，下一个）：

    <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,
.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;
  }
</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>

Answer 2

要使用bootstrap执行此操作，.carousel-inner应该大于.carousel，并且它应该居中。您可以使用以下css代码来实现此更改：

如果你的 bootstrap是3.3.0及以上那么

.carousel {
    overflow: hidden;
}
.carousel-inner {
    width: 150%;
    left: -25%;
}
.carousel-inner > .item.next, 
.carousel-inner > .item.active.right {
    -webkit-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev, 
.carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, 
.carousel-control.right {
    background: rgba(255, 255, 255, 0.3);
    width: 25%;
}

对于3.3.0以下的bootstrap

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }
.carousel-inner .prev        { left: -33%; }

想要Bootstrap 3旋转木马显示前一个和下一个图像的一部分，以填充宽度100％

2 个答案: