twitter-bootstrap-3 - 希望 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到 slider 图像的宽度。前面的 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>