Swiper Item Width

Questions
1

Swiper item width is getting set too narrow when F7 processes swiper. The code at the end of this post always results in this fragment at the top. Note the added width spec of 17px. This forces image overlays in the swiper since the images are 100px wide with the class “es promote”. How do I tell F7 to provide sufficient space for each image?

<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
	    <div class="swiper-slide swiper-slide-active" style="width: 17px; margin-right: 50px;"><a href="/event/participate/"><img class="es promote" src="./resources/images/events/airspace.jpg"></a></div> ...

 <div>Featured</div>
     <div style="padding:5px" data-pagination='{"el": ".swiper-pagination"}' data-space-between="50" data-slides-per-view="5" class="swiper-container swiper-init">
	  <div class="swiper-wrapper">
	    <div class="swiper-slide"><a href="/event/participate/"><img class="es promote" src="./resources/images/events/airspace.jpg"></a></div>
	    <div class="swiper-slide"><img class="es promote" src="./resources/images/events/cherryblossom2.jpg"></div>
	    <div class="swiper-slide"><img class="es promote" src="./resources/images/events/echostage.jpg"></div>
	    <div class="swiper-slide"><img class="es promote" src="./resources/images/events/18stlounge.jpg"></div>
	    <div class="swiper-slide"><img class="es promote" src="./resources/images/events/natart1.jpg"></div>
	  </div>
	</div>
2

You have set slidesPerView:5 spaceBetween: 50. It does exactly what you have configured it with. Make slidesPerView: 'auto' and set in CSS, for example:

.swiper-slide {
  width: 100px;
}
1 Like
3

Aha! I thought between was between the edges of the entries not putting 5 within 50.

4

implemente, works. ok to close