Swiper React works on my local environement but not when I deploy it

Hey there, I’m trying to install a Swiper React on my website. It basically works, I can see the changes happening in the console, though the image that are loaded just plain disappear and I don’t know what’s causing this.

import cafecharbonImg from '../../static/img/Cafecharbon.png'
import superuImg from '../../static/img/SuperULogo128.png'
import { Swiper, SwiperSlide } from 'swiper/react';
[...]
<Swiper
      spaceBetween={50}
      loop={true}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>          
      <a href="https://www.magasins-u.com/">
              <p class="image is-128x128">
                <img
                  src={cafecharbonImg}
                  alt="Cafe Charbon"
                />
              </p>
            </a>
      </SwiperSlide>
      <SwiperSlide>          
        <a href="https://www.magasins-u.com/">
              <p class="image is-128x128">
                <img
                  src={cafecharbonImg}
                  alt="Cafe Charbon"
                />
              </p>
            </a>
      </SwiperSlide>
      <SwiperSlide>
            <a href="https://www.magasins-u.com/">
              <p class="image is-128x128">
                <img
                  src={superuImg}
                  alt="SuperU"
                />
              </p>
            </a>
      </SwiperSlide>
      <SwiperSlide>
            <a href="https://www.magasins-u.com/">
              <p class="image is-128x128">
                <img
                  src={superuImg}
                  alt="SuperU"
                />
              </p>
            </a>
      </SwiperSlide>    
    </Swiper>

That’s the bit of code,
https://608453c17accc600089d57b2--fcs.netlify.app/
Here is the preview of it.
In the console I can see that the swiper is doing its job, But I don’t understand why are the pictures all broken up.

Does it have to see with the scss purge ?
During the deployment I saw this :

7:39:36 PM: gatsby-plugin-purgecss: Only processing  /opt/build/repo/node_modules/swiper/swiper.scss

Could it be my problem ?

Thank you a lot for helping me :innocent:

The images are disappearing, because of:

As you can see, some transform style is being applied to them which is throwing it out of viewport. As to what’s causing that style, I’m not sure.

1 Like

I finally found what was wrong. It took me ages.

The problem was totally due to the CSS, but it was being purged as on Netlify-CMS we have a plugin called gatsby-plugin-purgecss that flushes swiper’s CSS.

{
   resolve: 'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules
   options: {
     develop: false, // Activates purging in npm run develop
     purgeOnly: [''], // applies purging only on the bulma css file
     ignore: ['swiper/']
   },
 }, // must be after other CSS plugins

In develop the css was working because of this parameters which I just found out after checking my config :
develop: false, // Activates purging in npm run develop

I just had to ignore the purge of swiper and it works fine this way :
ignore: ['swiper/']

Thanks @hrishikesh for pointing me the CSS problem out.

@FCS , what a detailed post! Thank you so much for coming back and sharing your solution with us. This will definitely be beneficial for future Forums members, and is part of what makes this place great :netlisparkles:

1 Like