Routine

<script src="./SmallSwiper.umd.js"></script>

ES6

npm install small-swiper --save-dev

import Swiper from "small-swiper"

Usage method

<div id="root">
<div>
	<div style="background: #21374B;"><img src="img/parcel.png"/></div>
	<div style="background: #808080;"><img src="img/webpack.png"/></div>
	<div style="background: #35495E;"><img src="img/vue.png"/></div>
	<div style="background: #0E0E0E;"><img src="img/react.png"/> </div>
</div>
</div>
<div id="btns">
	<button>点击切换到第0个</button>
	<button>点击切换到第1个</button>
	<button>点击切换到第2个</button>
	<button>点击切换到第3个</button>
</div>

• 1.horizontal direction

#root{
	height: 500px;
	width: 100%;
	overflow: hidden;
	background: moccasin;
}
#root>div{
	height: 500px;
	width: 100%;
	display: flex; 
}
#root>div>div{
	 flex-shrink:0;
	  height:  500px;
	  width: 100%;
	  line-height: 500px;
	  text-align: center;
	  display: flex;
	  justify-content: center;
}

#root img{
	align-items: center;
	display: block;
	height: 500px;
	max-width:100%;
}

window.onload = function(){
	const swiper = new Swiper({
		root:document.querySelector("#root"),
		loop:true,
		auto:false,
		delayed:2000,
		effect:"slide",
		direction:"vertical",
		index:0,
		disabledHand:false,
		callBack(index){
			console.log("html",index)
			document.title = "I am"+index+"page"
		}
	})
	const btnList = document.getElementById("btns").getElementsByTagName("button");
	
	[].slice.call(btnList).forEach((dom,i)=>{
		(function (i){
			dom.onclick = function(){
				swiper.moveTo(i)
			}
		})(i)
	})
}

• 2.vertical direction

#root{
	height: 500px;
	width: 100%;
	overflow: hidden;
	background: moccasin;
}
#root>div{
	height: 500px;
	width: 100%;
}
#root>div>div{
	  height:  500px;
	  width: 100%;
	  line-height: 500px;
	  text-align: center;
	  display: flex;
	  justify-content: center;
}

#root img{
	align-items: center;
	display: block;
	height: 500px;
	max-width:100%;
}

window.onload = function(){
	const swiper = new Swiper({
		root:document.querySelector("#root"),
		loop:true,
		auto:false,
		delayed:2000,
		effect:"slide",
		direction:"vertical",
		index:0,
		callBack(index){
			console.log("html",index);
			document.title = "I am"+index+"page"
		}
	})
}

• 3.Fade in and fade out

#root{
	height: 500px;
	width: 100%;
	overflow: hidden;
}
#root>div{
	height: 500px;
	width: 100%;
	position: relative;
}
#root>div>div{
	  height:  500px;
	  width: 100%;
	  position: relative;
	  left: 0;
	  top: 0;
}
#root img{
	display: block;
	height: 500px;
	width: 100%;
}

window.onload = function(){
	const swiper = new Swiper({
		root:document.querySelector("#root"),
		effect:"fade",
		loop:false,
		auto:true,
		direction:"horizontal",
		index:0,
		callBack:function(index){
			console.log("html",index)
		}
	})
}

github地址 具体实现请看关联 关联