I'm wondering if anyone knows of any plugins that make this effect of my layout? I need the photos to be in grayscale and only when it's in the middle is the normal color I do not know if I can do this with owl-carousel or if there is a plugin ready that does it:
if there is any plugin or study material, please let me know.
Follow the site link
You apply filter: grayscale(1) to all carousel items, the item that is applied to the " .center " and " .active" classes automatically by the plugin, you can reapply filter but with none value.
solution link: link
html:
<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>
CSS:
.owl-item {
filter: grayscale(1);
}
.owl-item.active.center {
filter: none;
}
js:
$('.owl-carousel').owlCarousel({
autoplay: true,
center: true,
loop: true,
nav: true,
});