図マルチswiper.js反応効果の回転

swiper.js写真ケースのレイアウトの周りに切り替えるように応答を達成

1、ヘッド組み込まCSSファイル

<リンクタイプ= "テキスト/ cssの" REL = "スタイルシート" のhref = "CSS / style.cssに">

2、ヘッド組み込まJSファイル

ます。<script type = "text / javascriptの" SRC = "JS / swiper.min.js"> </ SCRIPT>

HTMLコードに導入3、体

<DIV CLASS = "バナー・ボックス"> 
	<DIV CLASS = "バナー・トップ"> </ div> 
	<divのクラス= "バナータイトルは"> 
		<H1>を選択します素敵なテンプレート</ H1> 
	</ div> 
	<DIV CLASS = "バナー・テキスト"> 
		<p型>は独特の風景、また、あなたの公式ウェブサイト</ p型>だけではありません
	。</ DIV> 
	<DIV CLASS = "バナー・トップ・ワン"> </ div> 
	< "Swiper・コンテナ"クラス= div>の
		<divのクラスは= "Swiper-warpper"> 
			<DIV CLASS = "スライドSwiper Swiperスライド・センター・効果-なし"> 
				<a href="javascript:;"> 
					<IMG SRC = "画像/ banner1.jpg"について= ""タイトル= ""> 
				</a>の
			</ div>
			<DIV CLASS = "swiperスライド"> 
				<a href="javascript:;"> 
					<程度IMG SRC = "画像/ banner2.jpg" = ""タイトル= ""> 
				</a>の
			</ div>
			<DIV CLASS = "swiperスライド"> 
				<a href="javascript:;"> 
					<程度IMG SRC = "画像/ banner3.jpg" = ""タイトル= ""> 
				</a>の
			</ div> 
			<div要素クラス= "swiperスライド"> 
				<a href="javascript:;"> 
					<IMG SRC =約"の画像/ banner4.jpg" = ""タイトル= ""> 
				</a>の
			</ div> 
			<divのクラス= "swiperスライド"> 
				<a href="javascript:;"> 
					<IMG SRC =約"の画像/ banner5.jpg" = ""タイトル= ""> 
				</a>の
			</ div> 
			<divのクラス= "swiper -slide ">
				<a href="javascript:;"> 
					<IMG SRC =約"の画像/ banner6.jpg" = ""タイトル= ""> 
				</a>の
			</ DIV> 
		</ DIV> 
		<DIV CLASS = "バナー、矢印「>
			<DIV CLASS = "swiperボタン-PREV"> </ div> 
			<DIV CLASS = "swiperボタン-NEXT"> </ div> 
		</ div> 
	</ div> 
	<DIV CLASS = "swiper-ページネーション"> </ DIV> 

</ DIV> 
<DIV CLASS = "バナーボタン"> 
	<HREF = "javascriptの:;" クラス= "やる-BTNバナーボタン-BTN">更多模板</a>の
</ div> 

<スクリプトタイプ= "テキスト/ javascriptの"> 

	window.onload =関数（）{ 
		VARのswiper =新しいSwiper（」。 swiperコンテナ」、{ 
			自動再生：偽、//是否自动滚动
			速度：500、//滚动速速
			autoplayDisableOnInteraction：真、
			ループ：真、
			centeredSlides：真、
			prevButton '.swiperボタン-PREV '、// スイッチング約
			nextButton： '.swiperボタン-NEXT '、//を切り替えについて
			のOnInitを：関数（Swiper）{ 
				[3] swiper.slides .className =「スライドSwiper swiperスライド活性「; //現在の選択
			}、
			ブレークポイント：{ 
				100：{ 
					slidesPerView：0、
				} 
			} 
		}）; 
	} 

</ SCRIPT> 
swiper.js効果の詳細を参照してください：https：//でWWW .swiper.com.cn /デモ/