QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > swiper实现图片案例展示响应式布局滚动代码

原创商用 swiper实现图片案例展示响应式布局滚动代码

swiper.js实现响应式的左右切换图片案例展示布局。调用方法均有备注,方面修改,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

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

2、head引入js文件

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

3、body引入HTML代码

<div class="banner-box">
	<div class="banner-top"></div>
	<div class="banner-title">
		<h1>选择一个漂亮的模板</h1>
	</div>
	<div class="banner-text">
		<p>别具一格的不仅是风景,更是您的官方网站</p>
	</div>
	<div class="banner-top-one"></div>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide swiper-slide-center none-effect">
				<a href="javascript:;">
					<img 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,
			slidesPerView: 3, //当前选中
			pagination: '.swiper-pagination',
			paginationClickable: true,
			prevButton: '.swiper-button-prev', // 左右切换
			nextButton: '.swiper-button-next', // 左右切换
			onInit: function(swiper) {
				swiper.slides[3].className = "swiper-slide swiper-slide-active"; //当前选中 状态
			},
			breakpoints: {
				100: {
					slidesPerView: 0,
				}
			}
		});
	}

</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
爱彩票 www.33941.com-彩票分析师-| www.323202.com-123体彩-| www.555115.com-快三如何预防出龙| www.666060.cc-新加坡彩票类的工| www.961843.com-四川有福彩快三吗| www.go7.com-安徽快三在线计划| www.888007.com-彩票在线人工计划| www.982726.com-注册送体验金的彩票| www.bc90.com-江西多乐彩老十一| www.6683.vip-乐视赢家彩票| www.aa4.com-中国福彩中心官网| www.53395.cc-时时彩4码技巧| www.069767.com-龙虎和彩票软件| www.625395.com-开心彩票网站| www.613641.com-腾讯抄袭彩虹六号| www.772831.com-4scc彩票-| www.3660.com-施乐彩色复印机粉| www.03103.com-中彩娱乐中彩在线| www.562917.com-三分彩官网下载链接| www.706170.com-天天彩选四中奖号码| www.821824.com-巨彩分发系统| www.928582.com-体彩字谜-| 亿发彩票www.901176.com| www.yv75.com-中国湖南福彩官网| www.571623.com-福彩三等奖-| www.0214.top-福彩网赚钱是真的吗| www.069313.com-优乐彩手机版下载| www.698049.com-浙江省体彩中心| www.789097.com-中国足球彩票新版| www.881900.com-大乐透牛彩网| www.961884.com-三彩服饰地址| www.9500.vip-福彩3d组六多少钱| www.64ty.com-天空彩民心水网| www.7499.xyz-便利店彩票-| www.zn91.com-彩名堂苹果版| www.5189.pw-四川体彩在哪里兑奖| www.554392.com-怎样对彩票-| www.796047.com-字谜彩票-| www.879739.com-彩票开奖号码爬虫| www.966786.com-山西宝马彩票案| 500彩票www.379477.com| www.958802.com-今晚体彩的开奖号码| www.2817.xyz-本期七星彩高手| www.34xr.com-七星彩第19034| www.649178.com-七彩椒多少钱一斤| www.sc48.com-3分时时彩开奖| www.398595.com-福利彩票开票时间| www.507265.com-竞彩猫专家推荐回顾| www.27682.com-福彩体彩家彩网排了| www.91618.com-160中彩网站多少| www.cp5660.com-玩快三是什么| www.689706.com-乐米彩票官网3d推| www.33404.com-为什么凤彩网打不开| www.97723.com-香港时时彩开奖历史| www.064977.com-老9购彩票-| www.948426.com-体育彩票公益基金| www.7910.vip-福利彩票猫腻| www.656857.com-竞彩2串1对冲外围| www.808879.com-体彩任九中奖率| www.932223.com-晨兴彩票app| 天下彩www.481770.com| www.376716.com-中国福利彩票36期| www.456924.com-乐八时时彩首页| www.7102.vip-甘肃旺豪快三| www.403663.com-福利彩票隔期走| www.15uq.com-彩票咋玩-| www.5286.wang-今晚七星彩测什么号| www.109569.com-双彩论坛首页首页| www.07ga.com-新彩吧网站新彩吧| www.7711.cm-湖北彩前三值| www.671505.com-重庆时彩牛牛平台| www.mh0.cc-快三吉林走势图解| www.bg19.cc-下载快三中奖助手| www.723698.com-福彩3d字谜天齐网| www.820124.com-河南天价彩礼惨案| 凤凰彩票www.88266v.com| www.7074.top-腾讯分分彩窍门| www.952970.com-广东彩票-| www.820026.com-网上买彩票不兑奖| www.907137.com-山西大同快三开奖| www.997607.com-风发彩票骗局| www.hr42.com-好彩堂网站-| www.d29.club-买彩票软件哪个好用| www.33oi.com-开福利彩票的手续| www.602655.com-彩讯pc28加拿大| www.671232.com-彩一网正版藏机图| www.062897.com-竞彩258彩票网| www.644859.com-足彩单场玩法规则| www.816199.com-河北快三今天推荐| www.951937.com-关于彩神vi-| www.zy60.com-手机新浪爱彩合法| www.588.vip-豪彩客户端下载| www.mq97.com-彩票的规律怎么算| www.8jq.com-四川彩票男子天才| www.54ug.com-彩票代销费-| www.317.in-彩票坑钱原理| www.3987.biz-彩票精准预测软件| www.789573.com-竞彩英甲比赛规律| www.863831.com-体彩排列三走势图儿| www.924118.com-七星彩杀码-| www.973482.com-画彩虹桥-| www.cai6898.com快三吉林开奖| www.go87.cc-河南都有什么彩票| www.35812.cc-彩票自动下单系统| www.366350.com-国产彩色喷墨打印机| www.478955.com-靠彩票赚钱-| www.14vu.com-亿博彩票计划群| www.67ee.com-澳门彩票官方投注网| www.110.com-福彩双色奖结果| www.554424.com-彩票经典对联| www.608140.com-彩友会公平-| www.dh48.com-一分快三下载链接| www.49cq.com-排列三夸度彩乐乐| www.2029.net-福彩双色球买法| www.792373.com-彩票用手机怎么兑奖| www.894867.com-中国体育彩票销售点| www.974203.com-28彩票平台-| www.cp167.com-1分快3彩票-| www.381423.com-网上代买彩票违法吗| www.524430.com-彩票开奖开奖结果| www.688571.com-体育彩票电话投注| www.858134.com-福彩时间开奖时间| www.966653.com-福彩排五开奖走势图| www.ye68.com-大发快三假的| www.31lp.com-玩彩票出什么号| www.778565.com-体彩双色球开奖号| www.985398.com-关小刀足彩预测推荐| www.ij88.com-福利彩票正版下载| www.55qy.com-家彩网3d开机号| www.3451.cn-彩金38免费送| www.740909.com-9敢彩票-| www.0850.xyz-彩播最新版本下载| www.796038.com-优盈彩票是骗人的吗| www.948244.com-福彩3d开试机号| www.f93.com-体彩排列三图谜汇总| www.403.cm-惠民彩票怎么用能赚| www.324001.com-航天彩虹股票行情| www.383776.com-彩票818网站| www.473783.com-福彩到底是真是假| www.66031.cc-福彩预测交流讨论区| www.026708.com-万福彩票app| www.610948.com-上海福利彩票赚钱吗| www.491396.com-体彩排列5中奖注数| www.906130.com-大连体彩店出租合作| www.993941.com-广西快3爱彩乐| www.hh30.com-快三大小单双计算器| www.136.la-如何回复彩虹屁的梗| www.2514.cn-华宇装潢腾讯分分彩| www.16798.cc-辽宁3d福彩走势图| www.972681.com-彩虹世界新版app| www.cp167.com-1分快3彩票-| www.7874.cc-500彩网站-| www.29jp.com-搜狐彩票电-| www.93pk.com-彩色的梦图片图画| 华人彩票www.040425.com| www.111772.com-彩票软件app骗局| www.94594.com-体彩竞猜比分| www.6664.top-玩彩票平台哪个好| www.cp641.com-彩神大发快3| www.k13.xyz-山西福利彩票网站| www.95sl.com-鸿鑫娱乐时时彩| www.881065.com-福彩流水单-| www.04qa.com-桃花的彩铅画图片| www.831828.com-福彩七乐彩下期预测|