react輪播圖組件基於swipercss
demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.htmlhtml
npm install reactjs-swiper
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') );
配置項 | 數據類型 | 功能 |
className | string | 自定義 className |
showPagination | bool | 是否顯示分頁按鈕 |
options | object | Swiper 配置選項 |
items | array | 輪播圖記錄數 |