1.组件需求:
- 封装一个react的轮播图组件。
- 轮播图里边可以自定义图片数量,和图片
2.上代码
import React, { Component } from 'react'
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
export default class Swiperself extends Component {
render() {
return (
<div className="swiper-container">
<div className="swiper-wrapper">
{this.props.children}
</div>
</div>
)
}
componentDidMount() {
new Swiper('.swiper-container', {
loop: true
})
}
}
3.引用自己封装的轮播图组件
import React, { Component } from 'react'
import Swiperself from './Swiperself.js'
export default class App extends Component {
render() {
return (
<div>
<Swiperself>
<div className="swiper-slide">11111</div>
<div className="swiper-slide">22222</div>
<div className="swiper-slide">33333</div>
</Swiperself>
</div>
)
}
}