想要Bootstrap 3轮播显示前一个和下一个图像的一部分,以填充宽度100%

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;
  }
}

演示：

    <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>