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 ponentDidMount method of my ponent

     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

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 ponentDidMount method of my ponent

     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

• javascript
• reactjs
• swiper.js

3 Answers 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 ponentDidMount as done already.

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

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

class CoverFlowCarousel extends Component {
  ponentDidMount() {
    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;

I remend to init swiper inside ponentDidUpdate if slides' data is loaded from the server. If you fetch the data from the server which is usually called inside ponentDidMount 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 ponent:

  state = {
    Swiperdata: []
  }

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

  ponentDidUpdate(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>
  )
}