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.876952.com-合买体彩-| www.66129.com-彩票选号怎么选的| www.093515.com-北京朝阳区体彩中心| www.661863.com-竞彩最迟兑奖时间| 3668彩票www.3668t.com| www.804996.com-彩票推荐号码| www.715038.com-瑞彩网首页-| www.124344.com-买彩票中奖的技巧| www.67385.com-亚博体育彩票下载| www.761706.com-七乐彩胆拖投注玩法| www.356824.com-福利彩票中三个数| www.413613.com-澳门威尼人彩票网| www.824199.com-三彩衣服如何| www.579903.com-甘肃娱乐快三查询| www.222114.com-大发快三乐点| www.990744.com-有人用澳客赢家彩票| www.175010.com-北京福彩快三一定牛| www.751068.com-福中彩-| www.738263.com-手机上加群玩彩票| 8号彩票www.81520y.com| www.929.online-49个数字型彩票| www.349788.com-彩民卡客户端| www.485585.cc-彩票代购软件排行榜| www.569003.com-上海福彩公告| www.754822.com-黑彩快三怎么拉人| www.cai6877.com江西快三预测| www.nr26.com-京东彩票怎么买| www.038041.com-彩双色球工具大全| www.247265.com-福彩字谜晚间总汇| www.465738.com-网易竞彩足球预测| www.284535.com-竞彩混合-| www.392115.com-彩票智能分析系统| www.559010.com-彩票六个数字玩那种| www.798580.com-中国福彩彩票app| www.910528.com-彩93彩票app| www.983243.com-众彩中彩-| www.af02.com-手机彩票-| www.t25.biz-彩票在支付宝兑奖| www.79lb.com-图谜汇总3d牛彩网| www.979064.com-手机福利彩票下注| www.du69.com-时时彩五星走势图| www.23ue.com-赢彩专家破解| www.2868.org-昨天的福彩-| www.280455.com-在国外开设私彩平台| www.781646.com-2019体彩新规| www.039365.com-彩民之家开机号| www.32me.com-宁夏11选5彩破| www.88920.com-福彩速查图表| www.21639.cc-微信美女带你玩福彩| www.fd12.com-易彩快3的技巧| www.15xe.com-结婚彩礼全国排行榜| www.0120.biz-c168彩票app| www.392185.com-体彩四场三串一| www.518352.com-安徽福彩app| www.603105.com-彩虹6为什么被禁播| www.806219.com-98时时彩官方网站| www.235665.com-专业玩彩-| www.320996.com-五洲彩票登录网址| www.413868.com-精彩经典近义词| www.574819.com-体彩大乐斗周几开| www.247282.com-上海市福彩中心官网| www.352736.com-最有实力的黑彩平台| www.9774.cn-福彩3d美女会员图| www.f91.loan-体彩排列三图迷总汇| www.080152.com-快三一般多久出豹子| www.191127.com-贵州彩票快三玩法| www.286928.com-安徽快三怎么才稳赢| www.378395.com-七彩彩票查封了吗| www.469146.com-快发彩票是什么意思| www.544877.cc-澚淘彩票-| www.651143.com-陈流风景水彩| www.739612.com-彩乐园彩票下载安装| www.825995.com-手机彩票站-| www.904189.com-同学合买彩票中奖| www.967314.com-福彩双色球选号机| 亿彩堂www.87668a.com| www.436789.com-福州彩票店收人| www.021214.com-浙江福彩在线| www.221080.com-彩票论坛牛材网| www.297076.com-快乐彩开奖走势图表| www.8822.cn-下载5百万彩票网| www.66292.cc-3d彩经网杀码| www.160132.com-体育快中彩-| www.935238.com-在传奇彩票输了好多| www.193561.com-中原彩票三d| www.309080.com-快三返奖率-| www.320288.com-江苏快三直播走势图| www.2ns.cc-49cp彩票网-| www.73pq.com-重庆时时彩维护时间| www.2802.vip-香港好彩网app| www.466302.com-七乐彩领奖地址| www.397035.com-彩票脚本-| www.663388.com-体彩号-| www.739896.com-福彩站是怎样赚钱的| www.620561.com-世界彩票发展历史| www.800983.com-福彩3d彩涂今日| www.868721.com-海南7星彩预测| www.956706.com-有没有彩票代打群| 百姓彩票www.zuan222.com| www.850017.com-中国竞彩网官方网页| www.922672.com-人人中彩票跑路了| www.979636.com-发彩送彩金平台| www.vr4.cc-华人彩票—官方网站| www.954715.com-福彩双色球中彩| www.194883.com-快三买和值-| www.288952.com-快三最长连续多少期| www.362122.com-儿童赞美诗歌彩虹| www.440690.com-黑名单中彩票| www.528221.com-时时彩买9码概率| www.590332.com-苏宁彩票旗舰店| www.657044.com-彩贝游戏老虎机平台| www.721946.com-彩票套利贴吧| www.789666.com-好彩店彩票合法吗| www.858467.com-彩票公司是谁开的| www.934508.com-彩票动物总动员遗漏| 500彩票www.51515k.com| www.fj16.com-快三返点是什么意思| www.329331.com-福彩30选五走势图| www.384901.com-九千万彩票注册| www.465379.com-古建彩绘图案龙凤| www.82352.com-江苏快三qq群| www.05378.com-义乌福彩在线| www.679028.com-ag幸运彩金-| www.69875.com-百盈快三有没有规律| www.tt9.cc-幸运快三大小玩法| www.795859.com-福建天天彩-| www.871483.com-三分时时彩预测计划| www.935411.com-彩票77下载安卓| www.983914.com-彩99能提现吗| www.cp846.com-幸运快三有什么猫腻| www.km94.com-易彩快三能赢到钱吗| www.35tq.com-最新信博彩票官网| www.0036.cn-五位数字的彩票| www.291715.com-内蒙古快三最近遗漏| www.394342.com-极速分分彩开奖官网| www.09651.com-11006移动彩票| www.59197.cc-瑞彩祥云抢红包开挂| www.013610.com-七星彩这期规律图| www.079342.com-三分快三最高多少倍| www.188938.com-内蒙古时彩开奖结果| www.273111.cc-福彩的宗旨心得体会| www.363001.com-看到彩虹的唯美句子| www.924994.com-福彩彩票走势图| www.979350.com-246好彩-| www.cp3137.com-彩票端十分快三| www.pg73.com-时时彩走势app| www.r77.com-传统彩平台-| www.34nq.com-彩金试玩可提现| www.1194.in-彩票投注金额计算| www.9149.cc-福利彩用户注册| www.91136.com-美版无嘴好彩| www.030970.com-彩票真的有人中奖吗| www.122700.com-彩神喷绘机图价格| www.km06.com-易彩堂的网址是多少| www.x97.com-如何开网售体育彩票| www.55iw.com-海口七星彩早版| www.60bi.com-专业玩彩个人论坛| www.949.tv-体彩七星彩几点开| www.993327.com-足彩竞彩停售时间| www.184823.com-湖北快三分布图| www.341883.com-诺亚时时彩老客户端| www.044558.com-优信彩票大-| www.817526.com-购彩网是骗局吗| www.779407.com-福彩开奖预测结果|