如何使附近的图像可见的引导轮播（从 Instagram 提供）？答案

【问题标题】：How to make a bootstrap carousel (fed from Instagram) with nearby images visible?如何使附近的图像可见的引导轮播（从 Instagram 提供）？
【发布时间】：2017-03-11 15:30:19
【问题描述】：

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

制作来自 Instagram 的示例的奖励积分！

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

【问题讨论】：

标签： jquery twitter-bootstrap twitter-bootstrap-3 instagram gallery

【解决方案1】：

根据我使用滑块的经验，我真的很喜欢滑动滑块

使用起来非常简单。你有一个 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 才能使其工作。

我已经使用 The Instagram Feed plugin 将 Instagram 与 Wordpress 集成，但从未使用其他东西，但是，this javascript plugin 看起来不错但还没有测试过。

【讨论】：

【解决方案2】：

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

Slippry Slider 响应迅速，并有一个详细记录的示例，可实现您想要的：http://slippry.com/examples/shop

【讨论】：

Slippry Slider 是否允许可变宽度、固定高度的图像（因此图像保持比例，具有相同的高度，但允许相同的宽度）？在文档中没有看到任何相关内容。
是的，如果您调整浏览器的大小，您会看到滑块的大小正在调整。该示例已设置为使用页面的整个宽度。
关于滑块高度，您可以控制是否具有固定高度（并使图像按比例填充该空间）或根据当前幻灯片动态更改。您可以通过使用adaptiveHeight 设置来实现此目的，如此处所述slippry.com/settings

【解决方案3】：

如果你想实现this，可以使用经典的twitter bootstrap carousel示例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 是我的代码示例。

【讨论】：

我怎样才能得到比例、固定高度的图像，而它们之间没有奇怪的空白？看起来这个解决方案需要等宽（或裁剪）的图像。
只需设置容器的高度（.carousel-inner）。将其设置为图片的最大高度。之后，您可以选择将它们垂直对齐到轮播项目的中心。