kidjp85 / react-id-swiper

A library to use idangerous Swiper as a ReactJs component which allows Swiper's modules custom build
https://react-id-swiper.ashernguyen.site/
MIT License
1.49k stars 153 forks source link

"react-id-swiper" and Gatsby (small problem) #394

Open ositaka opened 4 years ago

ositaka commented 4 years ago

Hello, I just read on the npm site that "react-id-swiper" doesn't work so well with Gatsby.,,

I've been making a website and I would really like to use this component. Long story short, gatsby has an IntersectionObserver and probably this is what causes the react-id-swiper to don't work at 100% with the duplicated slides.

In my case, everything works very well, but I just get an issue with Gatsby ImageSharp plugin, on the duplicated slides. As they are "off" from the IntersectionObserver, the images stay blured and, only after the duplicated slide it becomes the active-slide, the image then becomes "normal".

I have here a codesandbox demo: https://codesandbox.io/s/github/ositaka/david-netlify-stories-last/tree/master/ (the 2nd slider is easier to spot the problem).

I've opened a conversation on gatsby's spectrum chat: https://spectrum.chat/gatsby-js/general/i-am-having-trouble-with-imagesharp-plugin-when-used-in-react-id-swiper~6785e7ad-47f5-4371-a358-5297157816c5 and here, Jeremy Allbright gave this piece of advice/code fix (facing the blur problem):

"A very hacky workaround was to disable the blur in your PreviewCompatibleImage:"

<Img style={imageStyle} fluid={image.childImageSharp.fluid} alt={alt} loading='eager'
    imgStyle={{
        opacity: 1,
    }}
    placeholderStyle={{
        opacity: 0
    }}
/>

spectrum

juliocabify100 commented 4 years ago

NIIIIIICE bro!

theskillwithin commented 4 years ago

I found i needed this when i did loop: true for some reason.

I hope to find a less hacky fix later because this is breaking the gatsby image lazy load, which is a bigger deal on site im working on.

theskillwithin commented 4 years ago

I see no way to properly fix this here and make more "gatsby friendly"

this is of course using Swiper lib behind the scenes so perhaps would need to contribute to Swiper first to get desired result

theskillwithin commented 4 years ago

Swiper now directly supports react. using that fixes this problem https://github.com/nolimits4web/swiper/blob/master/SWIPER-REACT.md