1.4.16 • Published 4 years ago
react-awesome-swiper v1.4.16
react-awesome-swiper
Swiper4 component for React, support pc and mobile, support typescript
install
npm install react-awesome-swiper
API document
see api document page
examples
see demos page
usage
config is as the same as Swiper.js
import React from 'react'; import AwesomeSwiper from 'react-awesome-swiper'; //this config is same as idangrous swiper const config = { loop : true, autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: true, }, // Disable preloading of all images preloadImages: false, // Enable lazy loading lazy: true, speed: 500, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', bulletElement : 'li', hideOnClick :true, clickable :true, }, on: { slideChange: function () { console.log(this.activeIndex); }, }, }; class Example extends React.Component { swiperRef = null goNext = () => {//use `this.swiperRef.swiper` to get the instance of Swiper this.swiperRef.swiper.slideNext(); } render() {
return (
<AwesomeSwiper ref={ref => (this.swiperRef = ref)} config={config} className="your-classname">
<div className="swiper-wrapper">
<div className="swiper-slide">slider1</div>
<div className="swiper-slide">slider2</div>
<div className="swiper-slide">slider3</div>
</div>
<div className="swiper-button-prev"></div><!--左箭头-->
<div className="swiper-button-next"></div><!--右箭头-->
<div className="swiper-pagination"></div>
</AwesomeSwiper>
)
} }
export default Example;
1.4.16
4 years ago
1.4.15
4 years ago
1.4.14
4 years ago
1.4.13
4 years ago
1.4.11
4 years ago
1.4.12
4 years ago
1.4.10
5 years ago
1.4.9
5 years ago
1.4.8
5 years ago
1.4.7
5 years ago
1.4.6
5 years ago
1.4.5
5 years ago
1.4.4
5 years ago
1.4.3
6 years ago
1.4.2
6 years ago
1.4.1
6 years ago
1.4.0
6 years ago
1.3.8
6 years ago
1.3.7
6 years ago
1.3.6
6 years ago
1.3.5
6 years ago
1.3.4
6 years ago
1.3.3
6 years ago
1.3.2
6 years ago
1.3.1
6 years ago
1.3.0
6 years ago
1.2.2
6 years ago
1.2.1
6 years ago
1.2.0
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago