slidesPerView ignored on first display

The 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?

[kidjp85]

@hedshafran , you don’t need to do so. Instead, please use param { rebuildOnUpdate: true }

[kidjp85]

I think you should not render Slide when images is empty.

render() {
     return this.props.images.length  > 0  ? <Swiper>....</Swiper> : false 
}