reactjs-swiper react轮播图组件基于swiper

react轮播图组件基于swiper

demo地址：http://reactjs-ui.github.io/reactjs-swiper/simple.html

1. 下载安装

npm install reactjs-swiper 

2.使用

import React, {Component} from 'react';
import {render} from 'react-dom';
import ReactSwiper from 'reactjs-swiper';
import './sass/example.scss'; // 自定义 css

const ReactSwiperExample = () => {
  const items = [{
    image: 'http://alloyteam.github.io/AlloyTouch/example/asset/ci1.jpg',
    title: '图片1',
    link: 'http://jd.com'
  }, {
    image: 'http://alloyteam.github.io/AlloyTouch/example/asset/ci2.jpg',
    title: '图片2',
  }, {
    image: 'http://alloyteam.github.io/AlloyTouch/example/asset/ci3.jpg',
    title: '图片3',
    link: 'http://jd.com'
  }, {
    image: 'http://alloyteam.github.io/AlloyTouch/example/asset/ci4.jpg',
    title: '图片4',
  }];

  const swiperOptions = {
    preloadImages: true,
    autoplay: 4000,
    autoplayDisableOnInteraction: false
  };
  return (
    <ReactSwiper swiperOptions={swiperOptions} showPagination items={items}
                 className="swiper-example" />
  );
};

render(
  <ReactSwiperExample />, document.getElementById('layout')
);

3.配置项

配置项	数据类型	功能
className	string	自定义 className
showPagination	bool	是否显示分页按钮
options	object	Swiper 配置选项
items	array	轮播图记录数

转载于:https://www.cnblogs.com/cbp-jltx/p/9681838.html