jquery - 如何制作 Bootstrap 轮播(从 Instagram 提供)并显示附近的图像？

Question

如何制作一个 Bootstrap (或至少响应式)轮播，其主图像右侧和左侧的图像在屏幕两侧可见？理想情况下，这些侧面图像应具有透明覆盖或模糊效果，以免分散注意力。

通过 Instagram 提供示例可获得奖励积分!

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

Answer 1

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

使用起来非常简单。您有一个 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 ，所以使用滑动 slider 应该不会有问题。

JSFiddle live example here

请注意，您需要包含 swiper.min.css、swiper.min.js 和一些 css 才能使其正常工作.

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