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.5126.biz-彩票网上怎么兑奖| www.336041.com-广西福利彩开奖结果| www.187017.com-吉林快三有人控制吗| www.051888.cc-九万彩票老版| www.p22.vip-美国强力球彩票规则| www.301738.com-福彩3d谜语图总汇| www.92462.com-188彩票官网| www.088251.com-福彩网押大小是真假| www.194273.com-网上玩快三骗局| www.308688.cc-松原快三开奖结果| www.70560.com-彩票充值送彩金活动| www.51067.com-福利彩开奖走势| www.264897.com-福彩3d免费交流群| www.375286.com-体彩任-| www.699600.com-中国福彩双色球查询| www.812097.com-足彩开奖及奖金| www.975320.com-这期七星彩规律图| www.027603.com-彩吧论坛首页一| www.297175.com-01第一彩票app| www.82573.com-彩票晚上几点停售| www.81gp.com-福盈门彩票网可信吗| www.c5.me-好彩网络骗局| www.71855.cc-快3彩票中奖是多少| www.243448.com-中国福利彩票分析| www.139501.com-盈彩在线能赚到钱吗| www.516275.com-快三真的没有人赢吗| www.170024.com-甘肃快三开奖结果今| www.756799.com-彩66软件-| www.880188.cc-福彩专家杀码和值点| www.ml28.com-万博时时彩官网平台| www.158331.com-腾讯五分彩骗局| www.269893.com-9彩彩票app-| www.350007.com-彩色笔画-| www.089122.com-吉林快三半顺规律| www.538652.com-百度彩票合法吗| www.0847.org-彩播版本1-| www.11ov.com-全天时时彩数据中心| www.386155.com-义乌福利彩票站点| www.507367.com-彩票排三中奖结果| www.581327.com-体育彩票几位数| www.663440.com-安吉彩票-| www.28pu.com-体彩七位数中三个数| www.400.org-乐彩点播-| www.065176.com-永盛彩票手机网址| www.145982.com-310足彩专家预测| www.127453.com-好运彩骗我了怎么办| www.770387.com-彩票店买黑彩| www.919562.com-网上买彩票有赢的吗| www.998325.com-精准人工快三| www.es13.com-下载九州彩票| www.d66.tv-乘风彩票-| www.48ko.com-无双大蛇3星彩| www.565887.com-中华彩票安卓下载| www.316114.com-上海福利彩票加盟| www.32171.cc-今晚足彩比分| www.8013.vip-彩虹伞美篇-| www.167621.com-江苏福彩快3| www.295816.com-体彩排列3开奖今天| www.24253.cc-宝马彩票违法么| www.18jm.com-国外大优彩票软件| 网易彩票www.501203.com| www.t82.org-彩票谜语藏机图| www.667106.com-七乐彩最新杀号公式| www.466411.com-福彩七乐彩派奖规则| www.562337.com-帮忙代玩彩票| www.01rw.com-重彩写意-| www.7636.cc-快三方法-| www.9546.top-海南四星彩论坛| www.677206.com-福利彩票五等奖| www.921687.com-彩神vii充值| www.348834.com-彩599-| www.127284.com-正规7k彩票-| www.208413.com-江苏福彩专家推荐号| www.631563.com-下载竞彩官方网站| www.759868.com-时时彩怎么看走势图| www.928403.com-鸿彩网直播种子| 500万彩票www.w983.com| www.473563.com-怎样往福彩机器交费| www.5758.pw-游戏厅的彩票机| www.070095.com-乐8app彩票-| www.119209.com-福彩9+1多少钱| www.208077.com-爱投彩票app| www.0743.xyz-369彩票官网下载| www.04066.com-手机能买福彩吗| www.255399.cc-时时彩后一稳赚公式| www.337571.com-彩金平台-| www.439006.com-cy888彩网-| www.838601.com-丹麦28彩票规律| www.967972.com-哪个网站能合买彩票| www.753393.com-江苏快三输了| www.850112.com-35彩票网计划推荐| www.932748.com-万博购彩平台| www.985708.com-竞彩网页-| www.yu.cc-中彩网双色球| www.qj87.com-至尊彩江苏快3| www.25ca.com-快三派彩助手| www.691586.com-吉林快三平台出租| www.081690.com-国外彩票的规律| www.e58.shop-北京乐和彩-| www.0551.live-山东真诀福彩第三版| www.398.cm-福彩王素英判多少年| www.924944.com-全民彩票怎么玩法| www.us96.com-私彩黑平台-| www.36392.cc-福利彩票几个号码| www.82958.cc-五百万彩票怎么下载| www.cp3477.com-河南福彩22开奖| www.a13.cn-彩票破解计算| www.9183.biz-手机体育彩票网站| www.7379.com-色彩构成马赛克| www.332146.com-彩票中头奖秘诀| www.403868.com-信阳结婚彩礼多少钱| www.29qd.com-福彩3d中奖号昨天| www.0008.cm-彩票有6位数字的吗| www.53022.com-彩票广告语-| www.009764.com-下彩触屏-| www.084840.com-体彩机顶盒怎么用| www.222914.com-3d福彩3d走势图| www.764081.com-彩038-| www.869862.com-彩票开奖现场视频| www.953619.com-中免红好彩什么味道| 亿彩彩票www.588yc.com| www.pe42.com-燕赵风采福利彩票网| www.25cb.com-华彩团队-| www.2421.org-腾讯一分彩玩法| www.369.tv-今曰福彩体彩字谜| www.6726.me-快三概率应用| www.75oy.com-旋子彩画手绘构图| www.qb43.com-手机彩票大全| www.930790.com-彩民中奖故事新闻| www.126728.com-彩票双色球机选| www.118905.com-网上怎样打彩票| www.678585.com-五分彩是真的还是假| www.810313.com-新宝彩票官网| www.891993.com-体彩竞技风暴| www.949745.com-北京快三最后一期| www.996748.com-黑龙江体彩开奖| www.at16.com-广东福彩有快3吗| www.xy27.com-d9彩票登录平台| www.qc72.com-正规彩票平台排行| www.0hl.com-宝彩网-| www.75nr.com-足彩2场单场固定| www.1888.vip-多彩贵州-| www.er72.com-大快三破解版手机版| www.990497.com-内蒙快三开奖直播| www.bx89.com-广西福彩下载| www.283694.com-福利彩票都是几位数| www.676781.com-酷彩吧app靠谱吗| www.806543.cc-彩票一拳-| www.893311.com-手机彩票过滤软件| www.976570.com-洛阳宜阳结婚彩礼| www.bg23.cc-彩678是真是假| www.27919.cc-博雅彩票苹果| www.1553.pw-福彩7位数中奖规则| www.748600.com-旺彩平台-| www.92061.com-彩票大奖排行榜| www.586192.com-66微彩-wap站| www.780717.com-体彩3试机开机列表| www.967220.com-福彩快三奖金怎么算| www.021345.com-福彩浙江快乐彩开奖| www.329943.com-多彩贵州网投票| www.974198.com-广西福彩有几种玩法| www.578768.com-大地彩票网站开发| www.659545.com-2001年福彩-| www.733965.com-众彩手机站-|