FIG multi swiper.js response effects rotation

swiper.js achieve responsive to switch around the layout of pictures Case

1, head incorporated css file

<link type="text/css" rel="stylesheet" href="css/style.css">

2, head incorporated js file

<script type="text/javascript" src="js/swiper.min.js"></script>

3, body introduced into the HTML code

<div class = "Banner-Box"> 
	<div class = "Banner-Top"> </ div> 
	<div class = "Banner-title"> 
		<h1> choose a nice template </ h1> 
	</ div> 
	<div class = "Banner-text"> 
		<the p-> unique is not only the landscape, but also your official website </ the p-> 
	</ div> 
	<div class = "Banner-Top-One"> </ div> 
	< class = div "Swiper-Container"> 
		<div class = "Swiper-warpper"> 
			<div class = "Slide-Swiper Swiper Slide-Center-Effect-none"> 
				<a href="javascript:;"> 
					<IMG the src = "Images / banner1.jpg" About = "" title = ""> 
				</a> 
			</ div>
			<div class="swiper-slide">
				<a href="javascript:;">
					<img src="images/banner2.jpg" about="" title="">
				</a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;">
					<img src="images/banner3.jpg" about="" title="">
				</a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;">
					<img src="images/banner4.jpg" about="" title="">
				</a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;">
					<img src="images/banner5.jpg" about="" title="">
				</a>
			</div>
			<div class="swiper-slide">
				<a href="javascript:;">
					<img src="images/banner6.jpg" about="" title="">
				</a>
			</div>
		</div>
		<div class="banner-arrow">
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
	<div class="swiper-pagination"></div>

</div>
<div class="banner-button">
	<a href="javascript:;" class="do-btn banner-button-btn"> 更多模板  </a>
</div>

<script type="text/javascript">

	window.onload = function() {
		var swiper = new Swiper('.swiper-container',{
			autoplay: false, //是否自动滚动
			speed: 500,      //滚动速速
			autoplayDisableOnInteraction: true,
			loop: true,
			centeredSlides: true,
			pagination: '.swiper-pagination',
			slidesPerView: 3, // currently selected
			paginationClickable: to true,
			prevButton: '.swiper-button-prev ', // about switching 
			nextButton: '.swiper-button-next ', // about switching 
			the onInit: function (Swiper) { 
				swiper.slides [. 3] .className = "Slide-Swiper swiper-slide-active "; // current selected 
			}, 
			Breakpoints: { 
				100: { 
					slidesPerView: 0, 
				} 
			} 
		}); 
	} 

</ Script> 
more about swiper.js effects, please refer to: https: // www .swiper.com.cn / demo /