reactjs-swiper 在react项目中实现轮播

关注

原创最新推荐文章于 2026-09-19 14:36:34 发布 5k 阅读 AI 写同款· GEO 优化 ›

umi-datav:数据可视化 umi-datav 数据可视化目录组件库相关教程官网 - UmiJS 官网 - Yarn 官网 - DvaJS 官网 - Ant Design 官网 - React 中文网 - React Github - UmiJS Github - DvaJS Github - roadhog 开源协议 MIT 立即下载

1.快速新建项目

npx create-react-app swiper

2.安装依赖

yarn add reactjs-swiper axios --save-dev

3.文件目录

App.js

import React, { Component } from 'react';
import './App.scss';
import SwiperBar from './SwiperBar'
class App extends Component {
  render() {
    return (
      <div>
        <SwiperBar />
      </div>
    );
  }
}

export default App;

SwiperBar.jsx

import ReactSwiper from 'reactjs-swiper';
import React,{ PureComponent } from 'react'
import axios from 'axios';
class ReactSwiperExample extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      swiperOptions: {
        preloadImages: true,
        autoplay: 1000,
        showPagination: true,
        autoplayDisableOnInteraction: false
      },
      items:[]
    }
  }
  componentDidMount() {
    axios.get('/api/navList.json').then( (response) => {
      console.log(response.data.data);
      this.setState({
        items: response.data.data
      })
    }).catch(e => (console.log(e)))
  }
  render() {
    return (
      <div>
        <ReactSwiper swiperOptions={this.state.swiperOptions} showPagination items={this.state.items} className="swiper-example" >
          
        </ReactSwiper>
        <div>
          {
            this.state.items.map((item) => {
              return(
                <div key={item.id}>
                  <img src={item.image} alt=""/>
                </div>
              )
              
            })
          }
        </div>
      </div>
    )
  }
}

export default ReactSwiperExample;

navList.json

{
  "success": true,
  "data": [
    {
      "id": 1,
      "image": "https://upload.jianshu.io/admin_banners/web_images/4550/a4aba36241eb146c13892301e486417cbf16af18.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540",
      "title": "图片1" 
    },
    {
      "id": 2,
      "image": "https://upload.jianshu.io/admin_banners/web_images/4573/8e236c77ce2141beeaee6515fb3abddfbb617fea.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540",
      "title": "图片2" 
    },
    {
      "id": 3,
      "image": "https://upload.jianshu.io/admin_banners/web_images/4566/867d2e49d573864ec5ae4ed9e6578a254a0c991d.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540",
      "title": "图片3" 
    },
    {
      "id": 4,
      "image": "https://upload.jianshu.io/admin_banners/web_images/4570/5d4776585f0206ff2e807971a13b06ed7d494595.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540",
      "title": "图片4" 
    },
    {
      "id": 5,
      "image": "https://upload.jianshu.io/admin_banners/web_images/4574/d5c5ea3e984c8c08071b467c2dfe5bd2d0acf7b8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540",
      "title": "图片5" 
    },
    {
      "id": 6,
      "image": "https://upload.jianshu.io/admin_banners/web_images/4564/563e90e1ea09698e8a9ad1a9c4fb36bcea2655be.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540",
      "title": "图片6" 
    }
  ]
}

yarn start

The End

收录于