Bootstrap Carousel显示下一个和上一个图像

引导旋转木马是否可以伸缩以显示滑块中的下一个和上一个图像？

  
 
 
 
  
 
  
 ... 
 
 
  
 ... 
 
 
         

我的旋转木马现在看起来像这样，我如何将上一张和下一张图片添加到当前活动的幻灯片中？

Answer 1

它可以使用Bootstrap，但需要一些自定义……

在Bootply上查看此示例： http ：//bootply.com/94444

你必须使用CSS和jQuery自定义幻灯片的位置..

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

另一种变化仅揭示了下一张和前一张幻灯片的一部分。 这可以通过在carousel-inner的左侧和右侧放置绝对位置覆盖来完成。

 .carousel-inner:before { position:absolute; top:0; bottom: 0; right: 82%; left: 0; content:""; display:block; background-color: #fff; z-index: 2; } .carousel-inner:after { position:absolute; top:0; bottom:0; right: 0; left: 82%; content:""; display:block; background-color:#fff; z-index: 2; } 

部分下一个/上一个的演示： http ： //www.codeply.com/go/QGkUVSqil8

Answer 2

我经历过Bootstrap 3.3.5不支持给定的解决方案，不幸的是，我做了一个全新的Bootstrap 3轮播扩展来达到目标​​。 它可以在https://github.com/assarte/visor-carousel找到

希望这可能会有所帮助。