0

Pessoal estou com uma dúvida alguém conhece algum plugin que faça com esse efeito do meu layout? preciso que as fotos fiquem em escala de cinza e somente quando ela estiver no meio seja a cor normal não sei se da para fazer isso com o owl-carouselou se existe algum plugin pronto que faça isso: se houver algum plugin ou material de estudo podem me passar por favor.

Segue link do site

inserir a descrição da imagem aqui

5
  • 1
    Jovem posta o seu CSS e o HTML inteiro ai inclusive com a <head>
    – hugocsl
    Commented 30/01/2018 às 17:21
  • @hugocsl Adicionei o link do servidor de testes com o site na pergunta acessa lá Commented 30/01/2018 às 17:23
  • Sem o Carrocel dos clientes na página não da pra te ajudar...
    – hugocsl
    Commented 30/01/2018 às 17:26
  • @hugocsl então eu ainda nao fiz porque to pesquisando aqui se da apra fazer com owl carousel isso ou se já tem algum outro plugin que faça entende? Commented 30/01/2018 às 17:28
  • existe uma maneira, com css vc deixa todas as imagens em escala cinza, quando chegar na imagem central, em destaque, com o owl carousel vc insere uma classe que deixa ele na cor normal.
    – Leandro
    Commented 30/01/2018 às 17:42

1 Resposta 1

0

você aplica o filter: grayscale(1) em todos os items do carousel, no item que é aplicado as classes ".center" e ".active" automaticamente pelo plugin, você aproveita para aplicar novamente o filter mas com valor none.

link da solução: 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,
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .