如何制作 bootstrap 旋转木马（来自 Instagram），附近的图像可见？

Question

如何制作一个 bootstrap（或至少响应式）轮播，其中的图像位于屏幕两侧可见的主图像的右侧和左侧？理想情况下，这些侧面图像应具有透明叠加层或模糊效果，以免分散注意力。

制作来自 Instagram 的示例可加分！

编辑：我认为我之前没有说清楚，但我需要它来显示高度相同但宽度可变（保持比例 - 无裁剪）的图像。聚焦图像将居中，相邻图像从屏幕上掉下来。

Answer 1

Bootstrap轮播只显示当前图片（不显示侧边的上一张和下一张图片）：http://getbootstrap.com/javascript/#carousel

Slippry Slider 响应迅速，并且有一个记录完备的示例可以实现您想要的效果：http://slippry.com/examples/shop

Answer 2

如果你想实现this, you can use the classical twitter bootstrap carousel example with multiple items。您所要做的就是在左右添加2个33％宽度的div块来覆盖左右图像，您还可以添加一些模糊效果或一些不透明度来保持焦点在主图上。

<div class="inactive" style="left: 0px;"></div>
<div class="inactive" style="right: 0px;"></div>

.inactive {
    top: 0px;          
    width: 33%; 
    height: 100%; 
    display: block; 
    position: absolute; 
    background: white; 
    opacity: 0.8; 
    z-index: 1;
}

Here 是我的代码示例。

Answer 3

根据我使用滑块的经验，我非常喜欢滑动滑块

它真的很简单易用。您有一个 HTML 布局：

 <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><!-- What ever you want here - Slide 1 --></div>
        <div class="swiper-slide"><!-- Slide 2 --></div>
        ... <!-- And so on… -->
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
</div>

而 javascript 有 some options

var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  paginationClickable: true,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 10,
  centeredSlides: true,
  slidesPerView: 3
});

而且他们也有 a lot of working examples，所以使用滑动滑块应该不会有问题。

JSFiddle live example here

请注意，您需要包含 swiper.min.css、swiper.min.js 和一点点 css 才能使其生效。

我已经使用 Instagram 与 Wordpress 集成 The Instagram Feed plugin but never with something else, however, this javascript plugin 看起来不错 但 还没有测试过。

如何制作 bootstrap 旋转木马（来自 Instagram），附近的图像可见？

How to make a bootstrap carousel (fed from Instagram) with nearby images visible?

jquery

gallery

instagram

twitter-bootstrap

twitter-bootstrap-3