swiper響應(yīng)式全屏banner圖片滾動(dòng)輪播代碼

使用方法：

1、head引入css文件

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

2、head引入js文件

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

3、body引入HTML代碼

<div class="wqd-section-three">

	<div class="section-three-fix">
		<h5 class="animate-img wqd-h5 animate-text" data-lazy="lazy">用戶(hù)口碑推薦</h5>
		<p class="animate-img wqd-p animate-text" data-lazy="lazy">百萬(wàn)企業(yè)信賴(lài)推薦，市場(chǎng)口碑零差評(píng)，性?xún)r(jià)比高</p>
		<a href="#" class="animate-text wqd-btn-blue animate-btn" data-lazy="lazy">立即創(chuàng)建</a>
	</div>
	
	<div class="section-three-box">
	
		<div class="section-box-title">
			<em></em>
			<em></em>
			<em></em>
		</div>
		
		<div class="section-img">
			<img src="images/sectoin-im3.jpg" width="100%" alt="" style="opacity:1;">
			<img src="images/section-bg3-61.jpg" width="100%" alt="">
			<img src="images/section-bg3-21.jpg" width="100%" alt="">
			<img src="images/section-bg3-31.jpg" width="100%" alt="">
			<img src="images/section-bg3-71.jpg" width="100%" alt="">
			<img src="images/section-bg3-51.jpg" width="100%" alt="">
		</div>
		
	</div>
	
	<div class="slipe-box">

		<div class="bannar">
		
			<div class="slipe-left"><img src="images/banner-arow.png" alt="" /></div>
			<div class="slipe-right"><img src="images/banner-arow.png" alt="" /></div>

			<div class="swiper-container slider-two">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">太清涼茶甜品網(wǎng)站需要展示產(chǎn)品色香味的特色，微企點(diǎn)的強(qiáng)大的頁(yè)面布局功能和參數(shù)調(diào)整，非常專(zhuān)業(yè)展示了產(chǎn)品的特色，瀏覽體驗(yàn)非常好。</p>
							<h6 class="animate-text" data-lazy="lazy">太清涼茶甜品 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">非魚(yú)是一個(gè)壁畫(huà)墻繪網(wǎng)站，需要炫酷展示產(chǎn)品。微企點(diǎn)的動(dòng)態(tài)交互設(shè)計(jì)非常好用，就算你完全不懂代碼，那種漂亮的邊欄彈出、鼠標(biāo)停留展示多層內(nèi)容等動(dòng)畫(huà)特效，也可以輕松實(shí)現(xiàn)。</p>
							<h6 class="animate-text" data-lazy="lazy">非魚(yú)墻繪 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-1.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">畫(huà)家張路華的個(gè)人網(wǎng)站，直接采用微企點(diǎn)預(yù)設(shè)的元素組件、通欄、單頁(yè)、模板，自由搭配，靈活替換，大大提高了建站效率，展示專(zhuān)業(yè)炫酷。</p>
							<h6 class="animate-text" data-lazy="lazy">張路華官網(wǎng)<span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-2.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">比較了不少建站工具，發(fā)現(xiàn)微企點(diǎn)是建站平臺(tái)中操作便捷，設(shè)計(jì)風(fēng)格也是時(shí)下時(shí)尚的，非常符合領(lǐng)思官網(wǎng)的定位和審美。</p>
							<h6 class="animate-text" data-lazy="lazy">領(lǐng)思云  <span class="slider-auther">CEO 郭雨劍</span></h6>
						</div>
						<img src="images/section-bg3-3.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">山里鮮是一個(gè)電商網(wǎng)站，對(duì)于網(wǎng)站功能的要求高。微企點(diǎn)內(nèi)外兼修，除了能實(shí)現(xiàn)炫酷展示，還有強(qiáng)大的網(wǎng)站功能，滿(mǎn)足營(yíng)銷(xiāo)推廣所需。</p>
							<h6 class="animate-text" data-lazy="lazy">山里鮮 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-6.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">用微企點(diǎn)做了一套內(nèi)畫(huà)鼻煙壺網(wǎng)站，這是一個(gè)對(duì)設(shè)計(jì)師友好的建站工具，讓不懂代碼的人也能做網(wǎng)站。功能簡(jiǎn)潔易懂，小白大牛都適合。</p>
							<h6 class="animate-text" data-lazy="lazy">鼻煙壺 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-5.jpg" alt="" />
					</div>
				</div>
				<div class="swiper-pagination swiper-pagination-two"></div>
			</div>
			
		</div>
		
	</div>
	
</div>


<div style="height:540px;"></div>


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