基于react和swiper4实现无缝轮播组件 中间显示主图 左右显示部分图
子组件 commonSwiper.js
import React, {Component} from 'react'
import ImportedImage from '../../../common/components/importedImage'
import '../../../common/sass/swiper'
import Swiper from '../../../common/js/swiper'
/*
* 调用示例:
* <SwiperHtml
* list={list} 必传-轮播列表
* courseInfo={courseInfo} 非必传-课程介绍
* isShowPagination={false} 非必传-是否展示分页器(默认不展示)
* isLoop={true} 非必传-是否循环轮播展示(默认循环展示)
* clickEvent={t.clickSwiper.bind(t)}> 非必传-事件回调
* </SwiperHtml>
*
*/
class App extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
const t = this;
let list = t.props.list;
let isLoop = t.props.isLoop || true;
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: isLoop,
slidesPerView: "auto",
centeredSlides:true,
spaceBetween: 20,
// 如果需要分页器
pagination: {
el: '.swiper-pagination'
},
on: {
click: (event) => {
if(t.props.clickEvent) {
t.props.clickEvent(event, mySwiper);
}
}
},
})
}
render() {
const t = this;
const {list, isShowPagination, courseInfo} = t.props;
return (
<div>
<div className="swiper-container">
<div className="swiper-wrapper">
{
list.map((item, index) =>
<div className="swiper-slide">
<ImportedImage img={item.pic}></ImportedImage>
{courseInfo && courseInfo[index]}
</div>
)
}
</div>
<div className="swiper-pagination" style={isShowPagination ? {'display':'block'} : {'display': 'none'}}></div>
</div>
</div>
)
}
}
export default App;
父组件
// list示例
list: [{
id: 1,
name: 'aaaaa',
title: '标题标题标题标题标题',
pic: pic1, // swiper 图片的src
url: url, // 点击swiper跳转的url,
text: [
'介绍1介绍1介绍1介绍1',
'介绍2介绍2介绍2介绍2',
'介绍3介绍3介绍3介绍3',
'介绍4介绍4介绍4介绍4',
]
}]
// 事件回调
clickSwiper(event, mySwiper) {
const t = this;
const {list} = t.state;
const index = mySwiper.activeIndex % list.length;
const type = event.target.getAttribute("data-type");
const id = event.target.getAttribute("data-id");
if (type == 'add') {
t.onBtnAdd(id);
}
else {
window.location.href = list[index].url;
}
}
// html
<div id="slide">
<SwiperHtml
list={list}
courseInfo={courseInfo}
isShowPagination={false}
clickEvent={t.clickSwiper.bind(t)}>
</SwiperHtml>
</div>
css
#slide{
width: 100%;
.swiper-pagination-bullet-active{
background: #ff7327;
}
.swiper-container{
height:u(600px);
}
.swiper-slide{
width: 76%;
height:u(590px);
float: left;
position: relative;
border-radius: u(30px);
overflow: hidden;
box-sizing: border-box;
background: #fff;
box-shadow: #f2f2f2 0px u(10px) u(10px);
.icon{
width: 0.8rem;
height: 1rem;
background: url('../assets/gather/slide/icons.png') no-repeat;
background-size: 7.08rem 2.3rem;
background-position: -6.24rem 0;
position: absolute;
bottom: 0.3rem;
right: 0.2rem;
z-index: 99;
}
.img{
width: 200%;
height: u(260px);
}
.title{
width: 86%;
margin: 0 auto;
font-size: u(30px);
color: #333;
text-align: left;
margin-top: u(30px);
}
.content{
width: 80%;
margin: 0 auto;
box-sizing: border-box;
font-size: u(24px);
color: #666;
margin-top: u(24px);
li{
padding-top: u(16px);
}
}
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
height: 0.4rem;
line-height: 0;
}
}
效果图