【react 使用swiper插件写轮播图】：完整代码无bug+ 样式.less

【效果实例】

【treasure.js】

首先：

npm install swiper -- save

我写的死数据，如果你要自己加图片或者有数据，就在swiper-wrapper的子项map方法循环就好了。。 

建议直接npm官网看一下，里面有详细的react.js用法。

我这里没有设置其他属性，只有滑动和分页器，其他比如自动播放，延迟时间等属性，查一下官网，然后设置在生命周期componentDidMount()里面就可以啦

import React, { Component } from 'react';
import styles from './treasure.module.less';
import Header from '../../components/header/header';
import SideNav from '../../components/sideNav/sideNav'
import Swiper from 'swiper';


class Treasure extends Component {

  componentDidMount() {
    new Swiper('.swiper-container',{
      loop: true, // 循环模式选项
  
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
  
      //小圆点分页
      pagination: {
        el: '.swiper-pagination',
      },

      //autoplay: true,
      observer: true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents: true,//修改swiper的父元素时，自动初始化swiper
    });
  }

  render() {
    return (
      

        {/* 

         */}
        

          

              
Slide 1
              
Slide 2
              
Slide 3
          

          {/* 分页器 */}
          

        
        Treasure
      
    );
  }
}

export default Treasure;

【treasure.module.less】(样式文件)

我用的.less预处理，你可以直接用.css等也一样的。

.treasureWrap {
  height: 1000px;
  padding: 0;
  margin: 0;
  border: 0;
  padding-left: 207px;
  padding-right: 207px;
  padding-top: 98px;
  overflow: hidden;
  background-color: #eaddf0b0;
  :global {
    .swiper-container {
      --swiper-theme-color: #ff6600;
      --swiper-pagination-color: #00ff33;
      width: 100%;
      height: 400px;
      border-radius: 8px;
      background-color: #cfd8e2;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      list-style: none;
      padding: 0;
      z-index: 1;
      margin-bottom: 20px;
      .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        transition-property: transform;
        box-sizing: content-box;
        .swiper-slide {
          flex-shrink: 0;
          width: 100%;
          height: 100%;
          position: relative;
          transition-property: transform;
          line-height: 400px;
          text-align: center;
          font-size: 50px;
        }
        .one-slide {
          background: #4390EE;
          color: #fff;
        }
        .two-slide {
          background: rgb(131, 185, 110);
          color: #fff;
        }
        .three-slide {
          background: rgb(233, 115, 68);
          color: #fff;
        }
      }
      .swiper-pagination {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        text-align: center;
        transition: .3s opacity;
        transform: translate3d(0,0,0);
        z-index: 10;
        .swiper-pagination-bullet {
          margin: 0 4px;
          width: 8px;
          height: 8px;
          display: inline-block;
          border-radius: 100%;
          background: #000;
          opacity: .2;
        }
        .swiper-pagination-bullet-active {
          opacity: 1;
          background: var(--swiper-pagination-color,var(--swiper-theme-color));
        }
      }
    }
  }
}

 

欢迎交流，直接留言就好啦