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.924951.com-傲赢彩票在哪儿下| www.2822.in-好彩店骗子-| www.618905.com-淄博体彩中心地址| www.711696.com-时时彩后四万能码| www.796512.com-足彩14奖金-| www.871841.com-q彩app真的吗| www.944064.com-微微彩票官网| 彩民网www.76520s.com| www.444668.com-福彩旗下有哪些产品| www.559804.com-老彩票收藏照片| www.657454.com-黑龙江福彩客服电话| www.371761.com-彩票天下是不是| www.552052.com-彩乃奈奈中文字幕| www.733855.com-三分钟一开奖的彩票| www.865446.com-甘肃体彩排列三| www.959174.com-河北快三购买平台| www.aj8.cc-银川福彩中心| www.sq59.com-上海彩票店转让| www.76.com-快三彩票和值连出大| www.99187.com-秒开时时彩破解版| www.857285.com-怎样上网买彩票| www.939047.com-福彩3d南方双彩网| www.990473.com-内蒙快三n-| www.wi1.com-下载河北快三助手| www.rw07.com-快三输了能回血吗| www.13vj.com-时时彩任三直选单式| www.86ul.com-请核对好彩票| www.3742.xyz-大空彩票官方网站| www.522099.com-体彩授权自动售彩机| www.632825.com-体彩欧洲杯-| www.100489.com-易赢彩票官网app| www.38869.com-九盛彩票-| www.96227.cc-体育彩票哪年发行的| www.906432.com-霸气的玩彩票网名| www.890002.com-nba彩票在哪买| www.du09.com-凤凰彩票导师带你| www.551358.com-四场进球彩合买投注| www.771197.com-彩虹画儿童画| www.846401.com-体彩摸奖-| www.922448.com-招彩票分析师| www.985097.com-福利彩8苹果手机版| www.vh60.com-上海福利彩票中心| www.50xp.com-博牛彩票邀请码| www.85wr.com-福彩3d詹天佑| www.358142.com-微彩国际-| www.770142.com-好彩投下载安装| www.862209.com-体育彩票中奖号| www.926994.com-彩32彩票-| www.980069.com-体彩装饰-| www.392189.com-官方购彩软件叫什么| www.973789.com-腾讯分分彩平台推荐| www.hd60.com-福彩快三湖北开奖| www.591687.com-西甲看什么博彩公司| www.299655.com-安徽快三怎么玩的| www.0584.link-彩票专用表情gif| www.203043.com-利奥彩票平台下载| www.295060.com-十分彩一分钟快3| www.362220.com-雨后彩虹描写段落| www.hk22.com-那个彩票软件最正规| www.113772.com-乐彩网3d字谜汇总| www.464466.com-台湾基诺型彩票| www.940959.cc-大发快三研究吧| PK彩票www.www.23040.com| www.82bn.com-女子中竞彩大奖| www.7810.vip-老彩民的玩彩心得| www.63922.cc-广西福彩快3玩法| www.jx32.com-2元彩票app-| www.953942.com-牛蛙彩票准-| www.16322.cc-彩客站贴吧-| www.75593.cc-快三推荐号码一定牛| www.033607.com-帮别人时时彩下单| www.134848.com-亚彩会平台登录| www.023386.com-秒秒彩平台能作弊吗| www.772482.com-8g彩票神话注册| www.291323.com-彩投美女骗局| www.373022.com-434幸运彩票| www.541981.com-彩票超级大乐透开奖| www.526200.com-福彩快3官方网| www.bo21.com-大发快三怎么买| www.022518.com-快三搭建一条龙| www.828651.com-英国彩票大奖姓名| www.947410.com-3彩吧彩报图库中心| 彩宝www.cb3188.com| www.408873.com-纪梵希彩妆官网| www.872653.com-彩票超级高手求职| www.954098.com-黑龙江体彩网中心| www.hp8.com-爱彩乐官网-| www.377087.com-葡京彩票下载安装| www.294722.com-福彩体彩快彩调整| www.386063.com-福彩3d牛彩348| www.520712.com-重庆时时彩资料群| www.978438.com-福彩3d双福彩票网| www.cd27.com-体彩五开奖结果| www.035608.com-彩票市场名词解释| www.04yk.com-彩票刑事案件| www.56786.com-海南七星彩图片大全| www.5231.net-481派彩网推荐号| www.17703.cc-胜负彩彩果-| www.270342.com-人人中彩票合法吗| www.382277.com-体彩排名诈骗| www.104086.com-马来西亚的彩票| www.194623.com-请把福彩三的早出来| www.717369.com-安徽铜陵体彩网| www.900632.com-3d彩界小少爷毒胆| www.462879.com-p3体彩今日开奖| www.6738.biz-彩票官方下载| www.38934.com-6合开彩奖结果| www.663777.com-有哪些靠谱的篮彩| www.7305.cn-彩虹六号不同版本| www.621017.com-荣华彩票-| www.740838.com-蓝精灵b彩报| www.590512.com-福彩3d天宇字谜| www.695329.com-福利彩票作弊| www.776820.com-中国人福彩网| www.874172.com-老谢说彩专家栏| www.984606.com-彩虹8彩票平台| www.lm16.com-中彩网邀请码多少| www.aa80.com-幸运彩app-| www.879585.com-网投彩票赚钱安全吗| www.949677.com-陕西福彩双色球| www.990452.com-重庆彩票游戏平台| www.rk2.com-彩app-| www.14vw.com-七里彩上官燕| www.309178.com-跟群买彩票-| www.379383.com-彩票答案-| www.036.club-安徽快三奖-| www.65oc.com-福彩主任视频| www.qw92.com-时时彩团队送彩金| www.r99.xyz-新浪世界杯彩票| www.979616.com-黄金叶七彩烟多少钱| www.mc29.com-玩彩网最新版| www.50cd.com-中国足彩在线官网| www.08674.com-福利彩票429| www.460177.com-9928彩票真相| www.2639.cn-时时彩新平台出租| www.s72.club-什么软件买彩票靠谱| www.478234.com-综艺福彩是真的吗| www.866461.com-昨日体彩开奖| www.939259.com-华夏彩在哪里下载| www.985031.com-wnba竞彩-| www.pv2.com-我想买彩票怎么买| www.qa62.com-567彩票cc-| www.04au.com-彩票免费在线试刮| www.311.me-足彩销售提成| www.ah61.com-彩票图谜-| www.qa11.com-帝王彩票真假| www.w66.ren-中国购彩网邀请码| www.41wn.com-ios唯彩看球| www.93fe.com-彩照是什么-| www.gs76.com-好彩蓝莓双爆珠价格| www.cp5558.cc-快三押注技巧| www.99785.cc-香港有多少种彩票| www.wj48.com-大发时时彩六码计划| www.393504.com-昨天的彩票是多少| www.553574.com-成都竞彩网点| www.618123.com-江苏手游彩官方网站| www.675329.com-许冠英中彩票| www.23998.com-大公鸡七星彩赚钱吗| www.78268.cc-山西福彩3d走势图| www.uh36.com-彩票是否真实| www.970231.com-安卓彩神通app| www.96532.com-下载安装快彩王| www.0953.site-彩宝典在线-| www.zx62.com-河南省彩票22选5|