使用 Owl carousel 在容器外显示多个图像

Question

我正在使用 Owl Carousel 插件在行容器中显示 4 个缩略图（使用 Bootstrap）。如何在不更改容器内的 4 个缩略图的情况下在容器外显示更多缩略图？我在几个网站上看到过这种效果，遗憾的是我不记得确切的位置了。

容器外的图像就像在阴影中一样，直到它们进入内部并变得可见。在图像中，蓝色缩略图是常规图像，外部的不透明度降低或具有背景颜色作为叠加层。

  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav: true,
    navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
    dots: false,
    autoplay: true,
    autoplayTimeout: 3200,
    autoplaySpeed: 2000,
    responsive:{
      0:{
        items:1
      },
      600:{
        items:4
      }
    }
  })


<div class="container">
      <ul class="owl-carousel">
        <li>
          <figure>
            <img src="http://placehold.it/350x150" alt="" />
          </figure>
        </li>
      </ul>
</div>

http://codepen.io/anon/pen/MyLOrq

Answer 1

将此添加到您的样式中：

.owl-carousel .owl-stage-outer {
    overflow: visible;
}
.owl-carousel .owl-stage-outer .owl-item {
    opacity: 0.25;
    transition: opacity 0.5s ease-out;
}
.owl-carousel .owl-stage-outer .owl-item.active {
    opacity: 1;
}

玩你喜欢的价值观。