常用轮播图

swiper轮播图切换:

swiper是一个优秀的移动端轮播图切换插件,miniMobile十分接近原生的css,所以能够很好的和swiper结合。
下面是一个简单的demo!》 swiper官方Api

建议新窗口打开,使用Chrome浏览器或Firefox浏览器的开发者模式查看!
》 新窗口打开

实现代码


<section class="swiper-container h40">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src='img/banner1.jpg' class="w75 h40" /></div>
		<div class="swiper-slide"><img src='img/banner2.jpg' class="w75 h40" /></div>
		<div class="swiper-slide"><img src='img/banner3.jpg' class="w75 h40" /></div>
	</div>
	<!-- Add Arrows -->
	<div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
	<!-- Add Pagination -->
	<div class="swiper-pagination"></div>
</section>
<script>
	var swiper = new Swiper('.swiper-container', {
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		pagination: {
			el: '.swiper-pagination',
		}
	});
</script>
<style>
	.swiper-button-next,
	.swiper-button-prev {
		/*swiper 默认图标适应性较差,使用rem单位规定左右按钮大小,图标大小*/
		width: 0.3rem !important;
		height: 0.5rem !important;
		background-size: cover !important;
		margin-top: -0.23rem !important;
	}
</style>