引用swiper横向轮播 移动端

html部分

<div id="certify">
	<div class="swiper-container" id="swiperone">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img src="img/syimg/1.jpg">
			</div>
			<div class="swiper-slide">
				 <img src="img/syimg/1.jpg">
			</div>
			<div class="swiper-slide">
				 <img src="img/syimg/1.jpg">
			</div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
</div>

之后页面需要引入swiper.js和css

var swiperone = new Swiper('#certify .swiper-container', {
	watchSlidesProgress: true,//来计算每个slide的progress(进度、进程)
	slidesPerView: 1.5,//slider容器能够同时显示的slides数量(carousel模式)
	centeredSlides: true,//设定为true时，active slide会居中，而不是默认状态下的居左。
	loop: true,
    autoplay:true,
	loopedSlides: 100,
    navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination'
	},
	on: {
		progress: function(progress) {
			for (i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i);
				var slideProgress = this.slides[i].progress;
				modify = 1;
				if (Math.abs(slideProgress) > 1) {
					modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
				}
				translate = slideProgress * modify * 5/100 + 'rem';//重要
				scale = 1 - Math.abs(slideProgress) / 5;
				zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
				slide.transform('translateX('+translate+')scale('+scale +')');
				slide.css('zIndex', zIndex);
				slide.css('opacity', 1);
				if (Math.abs(slideProgress) > 3) {
					slide.css('opacity', 0);
				}
			}
		},
		setTransition: function(transition) {
			for (var i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i)
				slide.transition(transition);
			}
		}
	}
})