slidesPerView ignored on first display
See original GitHub issueThe slidesPerView param seems to be ignored on the initial display of the swiper. If I start resizing the page then it starts displaying correctly, while on the first load it just shows all the slides in a very tiny swiper box.
These are my current swiper params. As you can see I also tried both setting rebuildOnUpdate and shouldSwiperUpdate but this did not change anything. My slides come from this.props and are built using a map call
const swiperParams = {
slidesPerView: 3,
grabCursor: true,
loop: false,
direction: 'horizontal',
watchOverflow: true,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
breakpoints: {
480: {
slidesPerView: 1,
spaceBetween: 20
},
// when window width is <= 1024px
1024: {
slidesPerView: 2,
spaceBetween: 30
}
},
containerClass: 'swiper-container promo',
rebuildOnUpdate: true,
shouldSwiperUpdate: true
}
This is the map generating the slides
let slides = ''
if (this.props.images.length > 0) {
slides = (
this.props.images.map((imageRecord, index) => {
return (
<div key={index}>
<img src={imageRecord['thumb']} className="img-fluid light-shadow" alt={imageRecord['title']} />
<div className="swiper-hover" onClick={this.openLightbox.bind(this, index)}>
<i className="icon icon-zoom-in icon-2x"></i>
</div>
</div>
)
})
)
}
and this is the swiper call when rendering it
<Swiper {...swiperParams}>
{slides}
</Swiper>
In the following screenshots you can see the initial view which shows all slides and ignores the slidesPerView = 3 settings, and once I resize and restore the page, they display correctly
Before
After resize
Is there any method or param that I’m missing that would properly update the swiper once all the dynamic slides are in place?
Issue Analytics
- State:
- Created 5 years ago
- Comments:12 (4 by maintainers)
@hedshafran , you don’t need to do so. Instead, please use param { rebuildOnUpdate: true }
I think you should not render Slide when
images
is empty.