islider插件写移动端轮播图

CSS：

.iSlider {
  height: 13.0rem;
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.iSlider ul {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}
.iSlider li {
  position: absolute;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  list-style: none;
}
.iSlider ul li img{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

.iSlider div{
  background-color: #ffffff;
  padding: 3px;
}

HTML：

JS：

var islider = new iSlider({
	data: bannerList,
	dom: document.querySelector(".iSlider"),
	duration: 3000,
	animateType: 'default',
	isAutoplay: true,
	isLooping: true,
	isVertical: false,  //是否垂直滚动
	onslidechange: function(){
		sliderIndex = this.sliderIndex + 1;
		var html = '
'
		    + ''+ arrTitleList[this.sliderIndex] +''
		    + '
'
		    +'
'
		    + ''+ sliderIndex + ' / '+ arrTitleList.length+' '
		    +'
';
		document.querySelector('#titleBox').innerHTML = html;
	}
});

islider使用拓展： 更多参数的使用讲解