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

最新推荐文章于 2026-06-17 18:06:32 发布

原创最新推荐文章于 2026-06-17 18:06:32 发布 · 4.9k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

react

在本文中，我们将通过在React项目中利用reactjs-swiper库，逐步介绍如何快速搭建轮播组件。首先，使用create-react-app初始化项目，接着安装必要的依赖包，包括reactjs-swiper和axios。然后，我们看到项目包含App.js、SwiperBar.jsx和navList.json等文件。最后，启动项目进行预览。

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