es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Relleno de imagen de la diapositiva de swiper

18 Jun, 2023 Programación

Tengo un “swiper” de pantalla completa que contiene una serie de imágenes como diapositivas, así como se muestra a continuación:

<div class="swiper-slide"><div class="swiper-image"><img src="..."></div></div>

Con esta configuración (css estándar swiper), las imágenes tienen un ancho y una altura completamente maximizados. Me gustaría darle a la imagen un relleno para que la paginación y las flechas nunca se superpongan con la imagen. Esto funciona para el ancho (y para arriba si swiper-slide != flex), pero no para la altura.

No estoy seguro de por qué el relleno para la altura se come / no tiene efecto. la altura no escala la imagen.

Ejemplo en: https://jsfiddle.net/pvw8ay64/

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar un espaciado a las imágenes en un swiper de pantalla completa para evitar que la paginación y las flechas se superpongan a la imagen, se pueden seguir los siguientes pasos:

    1. Agregar un div contenedor alrededor del contenedor swiper para asignar una altura fija al swiper y establecer su posición en relativo.
    <div class="swiper-container-wrapper">
  <div class="swiper-container">
    ...
  </div>
</div>
    1. Establecer la clase de diapositiva swiper para mostrar flex y alinear elementos centrados para centrar la imagen dentro de la diapositiva.
    .swiper-slide {
  display: flex;
  align-items: center;
}
    1. Establecer la clase de imagen swiper para tener un relleno usando las propiedades de padding-top y padding-bottom para crear espacio encima y debajo de la imagen.
    .swiper-image {
  padding-top: 20px;
  padding-bottom: 20px;
}
    1. Ajustar la altura del contenedor-wrapper swiper para incluir el espacio de relleno.
    .swiper-container-wrapper {
  height: calc(100vh - 40px);
  position: relative;
}

    Al agregar estos estilos, las imágenes de Swiper tendrán un relleno tanto para el ancho como para el alto, lo que evita que la paginación y las flechas se superpongan a la imagen.

    Para una implementación completa de estos cambios, vea el ejemplo actualizado de jsfiddle: [https://jsfiddle.net/hnbLzso4/]

Comments are closed.