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á.

https://www.w3schools.com/howto/howto_js_active_element.asp

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>

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