0
163
ViewsAmpliar la primera diapositiva de un carrusel
Traté de crear un carrusel de la siguiente manera. Pero no pude hacerlo funcionar. También traté de usar el Modo central en el carrusel elegante. Pero solo se aplica a la diapositiva en el medio. Si existe un método o biblioteca que pueda ampliar la primera diapositiva de esta manera, indíquelo. gracias. 
3 answers
Answer question0
Tal vez pueda considerar agregar una clase "activa" a un elemento de la diapositiva, de modo que pueda aplicar el CSS apropiado a la clase activa y solo afectará al elemento activo. Esto significa que una de las imágenes estará "activa" y puedes hacerle lo que quieras, y cuando se deslice otra se volverá "activa" y heredará las propiedades, mientras que la anterior las perderá.
0
Independientemente de su caso de uso de diapositiva real, puede apuntar al primer elemento entre un grupo de hermanos con la pseudoclase css :first-child (consulte https://developer.mozilla.org/en-US/docs/Web/CSS/:first -niño ).
He agregado un ejemplo simple de cómo usarlo.
Para transferirlo a su swiper, deberá aplicar la pseudoclase :first-child a la clase que envuelve sus diapositivas individuales.
.wrapper { display: flex; } .entry { font-size: 15px; } .entry:first-child { font-size: 20px; } <div class="wrapper"> <div class="entry">Entry</div> <div class="entry">Entry</div> <div class="entry">Entry</div> <div class="entry">Entry</div> </div>0
Puedes lograr este diseño a través de estos códigos:
para la primera imagen
.slick-slide.slick-current.slick-active { .your class { width: 100%; } }por las siguientes imagenes
.slick-slide.slick-active { .your class { width: 80%; } }puede agregar el primer hijo si desea diseñar una clase específica