Swiper: Swiper React feedback needed 🧪

[nolimits4web]

Hey guys!

I am currently working on next major Swiper release, including official Swiper components for React. Would be greet if you can help me testing it.

Check this docs on how to try it https://github.com/nolimits4web/swiper/blob/master/SWIPER-REACT.md

[caseymhunt]

I've implemented the first example, verbatim, from the doc you've linked above and all content shows up on the first slide and swiping goes to blank slides. What am I doing wrong?

<Swiper
        spaceBetween={50}
        slidesPerView="auto"
        onSwiper={(swiper) => console.log(swiper)}
        onSlideChange={() => console.log('slide change')}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <span slot="container-start">Container Start</span>
        <span slot="container-end">Container End</span>
    </Swiper>

Renders the following...

[nolimits4web]

@caseymhunt you also need to include Swiper styles, e.g.:

import 'swiper/swiper-bundle.css';

[caseymhunt]

What is the correct syntax for using auto slides per view? This doesn't seem to function correctly...
slidesPerView="auto"

[nolimits4web]

It is correct, in “auto” mode you need to specify widths on slides

[caseymhunt]

It is correct, in “auto” mode you need to specify widths on slides

I see. Wouldn't it be safe to assume width: auto when slidesPerView="auto" or is there a danger in doing this that I'm not seeing?

[nolimits4web]

A lot of use cases where it can give unexpected results, specifically when it contains images, so by default it won't be set. You can set it in your CSS:
```
.swiper-slide {
width: auto;
}

[us88]

My goodness, thank you so much for this...

There is a library that wraps around SwiperJS called react-id-swiper, but there are a few issues involved with this, one of which is the inability to control duplicated slides in loop mode without resorting to selecting nodes in the DOM... (For instance, if you want to have onClick handlers and things like that apply to the duplicated slides)

I assume having a proper ReactJS port of SwiperJS would fix that, along with loads of other issues that arise from a simple wrapper.

[jozsefDevs]

For a certain use case of mine I was so happy to find this. I did some experiments on it: CodeSandbox link

So I would like to change the dataset inside the swiper over time. Not sure I'm doing it right in this example, but either with or without the loop parameter after you change the slides with the "Toggle dataset" button it seems like the Swiper looses the configs (?).

I'm using centeredSlides and slidesPerView=2.5 because I want to have the two items on the edges to be cut in half. However the same problem appears if one setting up slidesPerView=3 for example. (Feel free to try)

What is great that you never loose the Swiper instance, so this one is really great.

Please advise how this could be improved to work properly because I'd be glad to use this swiper lib directly from React this way.

EDIT 🎉🎉: Looks like I was able to overcome the problem with adding a useEffect that reacts to slide changes and manually call swiper.update(). Updated the sandbox link.

[valnub]

Been playing around with this – quite like it so far!
2 little things I noticed:

• I think import 'swiper/swiper-bundle.css'; should be in the readme :-)
• I find it a bit odd that props like navigation need to be imported first. Does omitting these imports (when not needed) improve site loading performance?

Other than that – great work as always! 👍

[feibi]

so, how to use thumbs?

[nolimits4web]

@jozsefDevs it happens because React plugin do auto update but when children/slides length (amount) changed, not slides itself. Will try to automate this process as well

[nolimits4web]

@feibi like this:

const [swiperThumbs, setSwiperThumbs] = useState(null);

return (
  <>
    <Swiper thumbs={{ swiper: swiperThumbs }}>
      {/* ... */}
    </Swiper>

    <Swiper onSwiper={setSwiperThumbs}>
      {/* ... */}
    </Swiper>
  </>
)

[nolimits4web]

@valnub

I find it a bit odd that props like navigation need to be imported first. Does omitting these imports (when not needed) improve site loading performance?

We are importing not props but Swiper's modules. Without these modules, yes, it will not have those functionalities + smaller bundle size

[catamphetamine]

autoplay property is missing from the React component.
https://github.com/nolimits4web/swiper/blob/master/src/react/params-list.js
https://swiperjs.com/api/#autoplay

[theskillwithin]

When used in gatsby. gatsby-image fails to load on slides that are looped

https://github.com/kidjp85/react-id-swiper/issues/394

EDIT: Nevermind! this appears to work in swiper/react!!!

[feibi]

@feibi like this:

const [swiperThumbs, setSwiperThumbs] = useState(null);

return (
  <>
    <Swiper thumbs={{ swiper: swiperThumbs }}>
      {/* ... */}
    </Swiper>

    <Swiper onSwiper={setSwiperThumbs}>
      {/* ... */}
    </Swiper>
  </>
)

It works, thanks!

[TFrost97]

@nolimits4web link for MD which you put above doesn't working (404)

[sk8Guerra]

I'm using Swiper component for reactjs (v6.0.0) like this:
<Swiper slidesPerView={1} effect={"fade"} fadeEffect={{ crossFade: true }}> but fade effect is not applied.

I'm also importing these scss files:

import 'swiper/swiper.scss';
import 'swiper/components/effect-fade/effect-fade.scss';

And doesn't seem to work... am I forgetting something?

Btw, I'm using reactjs + typescript

[nolimits4web]

@sk8Guerra you also need to import and install fade effect component on Swiper core

[nolimits4web]

Closing it as Swiper React already released

[sk8Guerra]

@sk8Guerra you also need to import and install fade effect component on Swiper core

Thank you so much, that was my mistake, it's working now.

[theskillwithin]

I am getting weird behavior where when first visiting the site. the 2nd (i only have 2 slides) will flash for a second before displaying the first