显示多个图像与猫头鹰旋转木马外容器

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;
}

根据自己的喜好玩这些值。