一起来看Ract(轮播)

轮播对于我们来说其实并不陌生

在网页模板上经常会出现轮播。例如商务/商业模板、个人简介模板上

接下来我来为大家介绍轮播

轮播大致上分为左右/上下轮播,以及淡入类和切换类甚至3D轮播,我们今天为大家介绍最基础的左右轮播

轮播主要包括：图片、左右切换图片按钮、分页器、导航按钮、滚动条

我们首先先在黑窗口/蓝窗口/....安装Swiper：

npm install --save Swiper
之后在页面内引入Swiper
复制代码

之后可以从手册内找到轮播的代码，也可以从我这里看下

	

	    

	        
Slide 1
	        
Slide 2
	        
Slide 3
	    
	    
	    

	    
	    
	    

	    

	    
	    
	    

	
	
复制代码

此后我们可以按照自己的需要写出我们的Css布局

.swiper-container {
width:100%;
height:2rem;
}
.swiper-slide img{width:100%;height:100%;}  
复制代码

最后我们在componentDidMount(){}内写入我们的Js效果

var mySwiper = new Swiper ('.swiper-container', {
//  direction: 'vertical', // 垂直切换选项  
    loop: true, // 循环模式选项
    // 如果需要分页器
pagination: {
  el: '.swiper-pagination',
  clickable:true,
},
// 如果需要前进后退按钮
navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
//  scrollbar: {
//    el: '.swiper-scrollbar',
//  },
//自动播放
//默认3000毫秒
autoplay:
{
	delay:500,//500毫秒切换一次
}
复制代码

})