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

使用方法：

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">用戶口碑推薦</h5>
		<p class="animate-img wqd-p animate-text" data-lazy="lazy">百萬企業(yè)信賴推薦，市場口碑零差評，性價比高</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)品色香味的特色，微企點的強大的頁面布局功能和參數(shù)調(diào)整，非常專業(yè)展示了產(chǎ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">非魚是一個壁畫墻繪網(wǎng)站，需要炫酷展示產(chǎn)品。微企點的動態(tài)交互設(shè)計非常好用，就算你完全不懂代碼，那種漂亮的邊欄彈出、鼠標停留展示多層內(nèi)容等動畫特效，也可以輕松實現(xiàn)。</p>
							<h6 class="animate-text" data-lazy="lazy">非魚墻繪 <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">畫家張路華的個人網(wǎng)站，直接采用微企點預(yù)設(shè)的元素組件、通欄、單頁、模板，自由搭配，靈活替換，大大提高了建站效率，展示專業(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)微企點是建站平臺中操作便捷，設(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">山里鮮是一個電商網(wǎng)站，對于網(wǎng)站功能的要求高。微企點內(nèi)外兼修，除了能實現(xiàn)炫酷展示，還有強大的網(wǎng)站功能，滿足營銷推廣所需。</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">用微企點做了一套內(nèi)畫鼻煙壺網(wǎng)站，這是一個對設(shè)計師友好的建站工具，讓不懂代碼的人也能做網(wǎng)站。功能簡潔易懂，小白大牛都適合。</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>