while I was drawing a layout I answered myself, but I want to hear people's opinions enter image description here

Is it possible to make such a slider layout using owl carousel 2 you need to display 3 slides on the page and so that you can see completely in the middle, and 2 on the sides were translucent and were also visible, and the name of the slide can also be stuck in this block, and hide on the extreme it will be in the class ".active"

it turns out to select the extreme ones with the .owl-item.active: first-child and .owl-item.active: last-child selectors and apply the filter opacity to them.

  • 2
    you need to make all the slides with opacity, for example, 0.75, and the one that is in the center (with the asset class) will be with opacity: 1. - NeedHate
  • +, it only happens when in the settings you make the 3rd item show, then the active class is applied to all three - cache0

1 answer 1

.owl-item.center { transform: scale(1.1); position: relative; z-index: 100000; } .owl-item.center:before { content: "...."; color: transparent; } .owl-item.center:after { content: "...."; color: transparent; } 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.css"> <div class="owl-carousel"> <div><img src="//placehold.it/300x150/936/fff/?text=1" alt=""></div> <div><img src="//placehold.it/300x150/693/fff/?text=2" alt=""></div> <div><img src="//placehold.it/300x150/369/fff/?text=3" alt=""></div> <div><img src="//placehold.it/300x150/f63/fff/?text=4" alt=""></div> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2//2.0.0-beta.2.4/owl.carousel.min.js"></script> <script> $('.owl-carousel').owlCarousel({ autoplay: true, center: true, loop: true, nav: true, }); </script>