Me gustaría agregar relleno a la diapositiva, Swiper ofrece el parámetro spaceBetween para fuera de la diapositiva (el espacio de envoltura). Ahora necesito relleno dentro de la diapositiva, intenté agregar el relleno a .swiper-slide pero rompió toda la estructura del swiper.
const swiper = new Swiper('.swiper', { loop: true, slidesPerView: 2, spaceBetween: 30 }); .swiper { width: 300px; height: 150px; background-color: gray; } .swiper-slide { padding: 15px; background-color: green; color: white; } <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>debe proporcionar padding y box-sizing: border-box; a su .swiper-slide haga esto:
const swiper = new Swiper('.swiper', { loop: true, slidesPerView: 2, spaceBetween: 30 }); .swiper { width: 100%; height: 150px; background-color: gray; } .swiper-slide { background-color: green; position:relative; color: white; padding:20px; box-sizing: border-box; } .padding{ max-width:100%; background:red; } .swiper-wrapper{ width: 100%; height: 100%; } <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="padding">Slide 1</div> <div>example 1</div> <div>example 2</div> <div>example 3</div> </div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>