Grayscale effect on slide Carousel

Asked

Viewed 109 times

0

Personal am I with a doubt anyone knows any plugin that do with this effect of my layout? I need the photos to be grayscale and only when she’s in the middle is the normal color I don’t know if you can do this with the owl-carouselor if there is any plugin ready to do this: if there are any plugin or study material can pass me please.

Following link from website

inserir a descrição da imagem aqui

css html5 slide
  • 1

    Young put your CSS and the entire HTML there including with the <head>

  • @hugocsl I added the link of the test server with the site in question access there

  • No customer Carousel on the page can’t help you...

  • @hugocsl so I still haven’t done why I’m searching here if apra do with Owl Carousel this or if you already have some other plugin that does understand?

  • there is a way, with css vc leaves all images in gray scale, when arriving at the central image, highlighted, with the Owl Carousel vc inserts a class that leaves it in normal color.

1 answer

0


you apply the filter: grayscale(1) in all Carousel items, in the item that is applied to classes ".center" and ".active" automatically by the plugin, you take advantage to apply again the filter but with value none.

solution link: https://codepen.io/leandroruel/pen/WMbMPZ

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

Browser other questions tagged css html5 slide

You are not signed in. Login or sign up in order to post.