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

I am using Owl Carousel plugin to show 4 thumbnails in a row container (with Bootstrap). How do I show more thumbnails outside the container without changing 4 thumbnails inside container? I have seen this effect on a couple of websites, sadly I don't remember exactly where.

我正在使用Owl Carousel插件在一个行容器中显示4个缩略图(使用Bootstrap)。如何在容器外显示更多缩略图而不更改容器内的4个缩略图?我在几个网站上看到了这种效果,遗憾的是我不记得到底在哪里。

Images outside container are like in shadow until they enter inside and become visible. In image, blue thumbnails are regular images and those outside have opacity toned down or they have background color as overlay.

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

  $('.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

1 个解决方案

#1

Add this to your styles:

将其添加到您的样式:

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

Play with the values to your liking.

根据自己的喜好玩值。

#1