CODEWITHSUNDEEP
reactjsimageswipeswiper.js
Eugene1111
Eugene1111

Reputation: 75

REACT SWIPER DOESN'T SHOW IMAGES

HEllo Why doesn't it show images? I use react swiper with a cube effect ( switching off the cube effect doesn't fix anything here my code thank you

yes I'm really new to react and other stuff... I could barely find how to even get the react swiper work with react...

the first 3 slides are just blank and the 4th and 5th says slide4 slide5

import React from "react";
import SwiperCore, { Autoplay } from "swiper/core";
import Swiper, { EffectCube } from "swiper";

SwiperCore.use([EffectCube, Autoplay]);

const images = [{ image: require("./img/1.jpg") }, { image: require("./img/2.jpg") }, { image: require("./img/3.jpg") }];

class Swipe extends React.Component {
    componentDidMount() {
        this.swiper = new Swiper(".swiper-container", {
            effect: "cube",
            cubeEffect: {
                shadow: true,
                slideShadows: true,
                shadowOffset: 20,
                shadowScale: 0.94,
            },
            pagination: {
                el: ".swiper-pagination",
            },
            navigation: {
                nextEl: "swiper-button-next",
                prevEl: "swiper-button-prev",
            },
            loop: true,
            grabCursor: true,
            autoplay: {
                delay: 7000,
                disableOnInteraction: true,
            },
        });
    }
    render() {
        return (
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <image classname="swiper-image" src={images[0]} />
                    </div>
                    <div class="swiper-slide">
                        <image classname="swiper-image" src={images[1]} />
                    </div>
                    <div class="swiper-slide">
                        <image classname="swiper-image" src={images[2]} />
                    </div>
                    <div class="swiper-slide">SLIDE4</div>
                    <div class="swiper-slide">SLIDE5</div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        );
    }
}

export default Swipe;

Upvotes: 1

Views: 4137

Answers (2)

Eugene1111
Eugene1111

Reputation: 75

so I googled it and googld it and fount the fix ( I hope it is)

to add this to a webpack.config.js

 {
              test: /\.(jpeg|jpg|png)$/,
              use: {
                loader: 'file-loader',
                options: {
                  esModule: false
                }
              
              }
            },

Upvotes: 0

bas
bas

Reputation: 15722

The main problem is the way you provide the src prop of your images:

<image classname="swiper-image" src={images[0]}

You're actually passing an object to src here since images array looks like this:

const images = [
  { image: require("./img/1.jpg") }, // Each of these objects are passed to the `src` prop of every image
  { image: require("./img/2.jpg") },
  { image: require("./img/3.jpg") }
];

Instead you need to pass the image something like this:

<img className="swiper-image" src={images[0].image} />

Also it shouldn't be class or classname, but className instead in React. And it's not the image tag, but img.

Full adjusted version of your example:

import React from "react";
import SwiperCore, { Autoplay } from "swiper/core";
import Swiper, { EffectCube } from "swiper";

// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/effect-cube/effect-cube.scss";

SwiperCore.use([EffectCube, Autoplay]);

const images = [
  { image: require("./img/1.jpg") },
  { image: require("./img/2.jpg") },
  { image: require("./img/3.jpg") },
];

class Swipe extends React.Component {
  componentDidMount() {
    this.swiper = new Swiper(".swiper-container", {
      effect: "cube",
      cubeEffect: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
      },
      pagination: {
        el: ".swiper-pagination",
      },
      navigation: {
        nextEl: "swiper-button-next",
        prevEl: "swiper-button-prev",
      },
      loop: true,
      grabCursor: true,
      autoplay: {
        delay: 7000,
        disableOnInteraction: true,
      },
    });
  }
  render() {
    return (
      <div className="swiper-container">
        <div className="swiper-wrapper">
          <div className="swiper-slide">
            <img className="swiper-image" src={images[0].image} />
          </div>
          <div className="swiper-slide">
            <img className="swiper-image" src={images[1].image} />
          </div>
          <div className="swiper-slide">
            <img className="swiper-image" src={images[2].image} />
          </div>
          <div className="swiper-slide">SLIDE4</div>
          <div className="swiper-slide">SLIDE5</div>
        </div>
        <div className="swiper-pagination"></div>
      </div>
    );
  }
}

export default Swipe;

sandbox example

I also want to point out that there is a React specific implementation for swiperjs you could use, see the documentation here.

Upvotes: 1

Related Questions