How to use the swiper plug-in in react?

Method: 1. Use the "npm i swiper -S" command to install the swiper package; 2. Use the import statement to introduce swiper's css and js files; 3. Write the structure of the swiper component in render and add it in react Just create the Swiper object within the mounting life cycle function.

The operating environment of this tutorial: windows7 system, react16 version. This method is suitable for all brands of computers.

Using basic swiper in react

Step 1: Install the package

npm i swiper -S

Step 2: Introduce the package

import Swiper from 'swiper/dist/js/swiper.js'  
import 'swiper/dist/css/swiper.css'

Step 3: Write html

    <!-- Slider main container -->
    <p class="swiper-container">

        <!-- Additional required wrapper -->
        <p class="swiper-wrapper">

            <!-- Slides -->
            <p class="swiper-slide">Slide 1</p>
            <p class="swiper-slide">Slide 2</p>
            <p class="swiper-slide">Slide 3</p>
        </p>

        <!-- If we need pagination -->
        <p class="swiper-pagination"></p>

        <!-- If we need navigation buttons -->
        <p class="swiper-button-prev"></p>
        <p class="swiper-button-next"></p>

        <!-- If we need scrollbar -->
        <p class="swiper-scrollbar"></p>
    </p>

Step 4: Create Swiper in the react declaration cycle Object is called

// 直接引用数据将，new Swiper放在componentDidMount
// 用axios请求数据，new Swiper放在componentDidUpdate  

    new Swiper('.swiper-container', {
        direction: 'vertical',//竖向轮播
        loop: true,//无缝轮播
        pagination: {//小圆点分页
            el: '.swiper-pagination',
        },
        navigation: {//左右分页
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        scrollbar: {//下划线分页
            el: '.swiper-scrollbar',
        }
    })

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of How to use the swiper plug-in in react?. For more information, please follow other related articles on the PHP Chinese website!