initialize swiper in reactJS

Question

i want to use Swiper for add slider in my React application. It is not swiping correctly. at first i install swiper with

npm install Swiper

then

import Swiper from swiper

Wrote this in the componentDidMount method of my component

     var swiper = new Swiper('.swiper-container', {
          direction: 'vertical',
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        });

I added:

    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>

and I added require styles in a css file that I import them and I import css and js file

    import 'swiper/css/swiper.min.css'
    import 'swiper/js/swiper.min.js'

but the result is incorrect. It shows just slider1 without any style and it doesn't show anything. Thank you.

Slider Image

Answer 1

I recommend to init swiper inside componentDidUpdate if slides' data is loaded from the server. If you fetch the data from the server which is usually called inside componentDidMount and call swiper init there too then swiper doesn't work properly. For example, in my case, loop didn't work at all. I've experimented a lot then came up with this idea.

To be more exact, swiper init have to be called if the state object where slides' data is stored. For example, inside class component:

  state = {
    Swiperdata: []
  }

 componentDidMount() {
    axios.get(`/carouseldata`)
      .then(res => {
        this.setState({ Swiperdata: res.data })
      })
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.Swiperdata !== this.state.Swiperdata) {
      var swiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        autoplay: {
          delay: 5000,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        slidesPerView: 1,
        slidesPerColumn: 1,
        loop: true,
        reverseDirection: true,
        stopOnLastSlide: false,
        loopAdditionalSlides: 1000,
        preloadImages: true,
        updateOnImagesReady: true,
        effect: 'fade'
      })
  }

render() {
  return(
          <div class="swiper-container">
            <div class="swiper-wrapper">
              {this.state.Swiperdata.map((item, i) =>
                <div key={item.id} className='swiper-slide'>
                    <img src={`/images/${item.photo}`} />
                </div>
              )}
            </div>
            <div className="swiper-button-next"></div>
            <div className="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
          </div>
  )
}

Answer 2

This is a simple cover flow slider from swiper. Stick it in a component and import it into your App.js

import React, { Component } from "react";
import Swiper from "swiper";
// CSS
//swiper css must come first
import "swiper/css/swiper.min.css";
// your custom css must come second to overwrite certain stylings in swiper.css
import "./CoverFlowCarousel.css";

class CoverFlowCarousel extends Component {
  componentDidMount() {
    this.swiper = new Swiper(".swiper-container", {
      grabCursor: true, // little hand cursor over slides
      loop: true, // allows the slides to loop from the last slide back to the first 
      // in that direction
      centeredSlides: true, // helps to center the slides
      slidesPerView: 2, // allows the slide you're looking at to be the centered slide 
      // with the slide before and the slide after to be hanging just off the page 
      // from the left and right of it
      parallax: true, // Helps focus the users attention to the slide in front/center
      effect: "coverflow",
      coverflowEffect: {
        rotate: 50, // Slide rotate in degrees
        stretch: 0, // Stretch space between slides (in px)
        depth: 100, // Depth offset in px (slides translate in Z axis)
        modifier: 1, // Effect multipler
        slideShadows: true, // Enables slides shadows
      },
      pagination: {
        el: ".swiper-pagination", // little dots under the slides for navigation
        clickable: true, // allows you to click on the little dots
      },
      navigation: {
        nextEl: ".swiper-button-next", // arrows on the side of the slides
        prevEl: ".swiper-button-prev", // arrows on the side of the slides
      },
    });
   }
  render() {
    return (
      <div className="swiper-container">
        <div className="swiper-wrapper">
          <div className="swiper-slide">Cover Flow Slide 1</div>
          <div className="swiper-slide">Cover Flow Slide 2</div>
          <div className="swiper-slide">Cover Flow Slide 3</div>
          <div className="swiper-slide">Cover Flow Slide 4</div>
        </div>
        <div className="swiper-pagination" />
        <div className="swiper-button-prev" />
        <div className="swiper-button-next" />
      </div>
    );
  }
}

export default CoverFlowCarousel;

Answer 3

I've used swiper successfully in a react app and these are the steps, after npm install,

import Swiper from "swiper"; 
import "swiper/css/swiper.css";

and the line import 'swiper/js/swiper.min.js' is unnecessary so delete it

then you can initalize the swiper instance in your componentDidMount as done already.