How to make Auto Slides Per View with dynamic content using Swiper Reactjs

Question

I'm trying to display images from my database in my react gallery using Swiper. Especially, I want to have centered + auto slides per view. The gallery works fine after resizing the window. This is the render function of my component.

imgs = function(this.state);
return (
        <Swiper className="carousel"
            ref={this.swiperRef}
            spaceBetween={10}
            slidesPerView="auto"
            centeredSlides
            navigation
            onSlideChange={this.onSlideChange}>

            {imgs.map((img, i) => (
                <SwiperSlide key={i}>
                    <figure className={"fig fig_"+i}>
                        <img src={img.img} alt={"img_"+i} className="img"/>
                    </figure>
                </SwiperSlide>
            ))}

        </Swiper>
    );

The variable imgs is calculated from the state and changes dynamically. Each time imgs would change I also call this.swiperRef.current.swiper.update(), but it doesn't seem to help:

this.setState({
    ...
}, () => {
    this.swiperRef.current.swiper.update();
    this.log("swiperRef", this.swiperRef.current.swiper);
});

This post: Swiper slider not working unless page is resized was of no help as neither observer, observeParents nor observeSlideChildren are recognized as react properties of the swiper object.

I think the problem comes as the update() call happens before the images are rendered and so their width is assumed to be zero, as can be seen when the swiper is logged after update():

slidesSizesGrid: (11) [1005.86, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

Any help would be appreciated. Also I don't really understand what "virtual" means.

score 1 · Answer 1 · edited May 03 '23 at 14:30

1

After adding slidesPerView='auto', the slide width needs to be automatic as well, so this CSS property on the slide class would make the swiper break automatically.

.swiper-slide {
    width: auto!important;
}

edited May 03 '23 at 14:30

user16217248

3,119
19
19
37

answered Mar 24 '21 at 10:53

erw erwer

21
1

3

Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/9193372) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you’ve made. – Syscall Mar 24 '21 at 10:57

score 0 · Answer 2 · answered Mar 13 '22 at 08:09

I tried to change slidesPerView dynamically according to window innerwidth by adding resize event as shown in below snippet:

  let [mywindow , setMywindow] = React.useState({})
  var resizeId;
  React.useEffect(()=>{
    window.addEventListener("resize",function(){
       clearTimeout(resizeId);
    resizeId = setTimeout(doneResizing, 500);

    })
    function doneResizing(){
      console.log("window is ",window.innerHeight,window.innerWidth  )
       setMywindow({height:window.innerHeight,width:window.innerWidth})
    }

  },[mywindow])

And inside slidesPerView prop I write below snippet to show only 2 slides if window innerwidth less than 700px otherwise show 3:

<Swipe
slidesPerView={mywindow.width && mywindow.width<700 ? 2 : 3}
...
/>

How to make Auto Slides Per View with dynamic content using Swiper Reactjs

2 Answers2