1

Buenas a toda la comunidad, me problema es el siguiente, yo necesito que cuando inicie la página, un elemento del carrusel (que se trata de una imagen) tenga un efecto de escala, para que se distinga sobre el resto de los elementos en carrusel, pero que cuando yo pase el cursor del mouse por encima de los demás elementos del carrusel, se quité ese efecto en el primer elemento, y que cuando quite el cursor de encima de alguno de los otros elementos, el primer elemento vuelva a tener su efecto de scala para que siga destacando sobre los demás.

código html:

<!--INICIO CARUSEL DE ELEMENTOS-->
<section id="carrusel" class="margen-top-20">
    <div class="container-fluid">
        <div class="row mr-5 ml-5">
            <div class="owl-carousel owl-theme">
                <div class="item">
                    <a href="#"><img src="imagenes/evento-01.png"></a>
                </div>
                <div class="item">
                    <a href="#"><img src="imagenes/evento-02.png"></a>
                </div>
                <div class="item">
                    <a href="#"><img src="imagenes/evento-03.png"></a>
                </div>
                <div class="item">
                    <a href="#"><img src="imagenes/evento-04.png"></a>
                </div>
                <div class="item">
                    <a href="#"><img src="imagenes/evento-05.png"></a>
                </div>
                <div class="item">
                    <a href="#"><img src="imagenes/evento-06.png"></a>
                </div>
                <div class="item">
                    <a href="#"><img src="imagenes/evento-07.png"></a>
                </div>
                <div class="item">
                    <a href="#"><img src="imagenes/evento-04.png"></a>
                </div>
            </div>
        </div>
    </div>
</section><!--FIN CARUSEL DE ELEMENTOS-->

código css:

 #carrusel {

 -webkit-box-shadow: 0 6px 5px -3px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0 6px 5px -3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 5px -3px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;

  .owl-carousel {

  .owl-item {

  .item {

    transition: transform .2s;

    &:hover {
      transform: scale(1.1);
    }

    img {
      border-radius: 15px;
      -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.6);
      -moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.6);
      box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.6);
    }

  }

}

.owl-stage {
  margin: 30px 0;
}

}

}

código javascript:

    $('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    dotsEach: true,
    responsiveClass: true,
    responsive: {
        0: {
            items: 1,
        },
        768: {
            items: 3,
        },
        992: {
            items: 7,
            margin: 12
        }
    }
})

Agradezco mucho que me puedan ayudar.

1 respuesta 1

0

Te recomiendo que uses Slick ya que trae una opción la cual te puede gustar, mira en los demos ahí encontraras una opción llama "Center Mode"

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.