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天

知道了
百盈PK10 www.42ir.com-3d彩票新闻-| www.779134.com-哪种彩票有漏洞| www.493419.com-彩票双色球多组数字| www.qx05.com-时时彩宝典旧版| www.059284.com-竞彩足球比赛分析| www.rh12.com-七乐彩复式兑奖表| www.118101.com-浙江体彩官网首页| www.193776.com-新浪竟技彩票网| www.585409.com-阿理彩票是什么网址| www.77gu.com-pk彩票是正规的| www.2341.vip-三分时时彩精准计划| www.092410.com-福建即乐彩11选5| www.767336.com-福彩三d藏机诗汇总| www.867108.com-金钱豹彩票游戏| www.az14.com-江西多乐彩开奖走势| www.k68.me-上海快三手机版| www.84ve.com-全中国彩票计划| www.3879.cn-好客彩网站-| www.tz1.com-36o彩票-| www.34gh.com-河南省体育彩票竞彩| www.09678.com-私彩源码-| www.388212.com-67彩票网站-| www.2226.pro-昆明七彩云南景点| www.579356.com-七星彩小说好看吗| www.688767.com-天天彩票网登陆| www.789430.com-全国彩票走势图| www.874822.com-7k彩票-| www.107544.com-彩票软件破解教程| www.977825.com-河北福利彩票三d| www.ki.cc-北京快三官网下载| www.mn07.com-7星彩票开奖结果| www.53786.cc-七星彩解码梦册| www.805401.com-七乐彩奖项金额表| www.11oj.com-在支付宝这样买彩票| www.4179.biz-龙江网络七彩云投屏| www.69976.cc-盛世彩票ss55| www.18866.cc-998彩票官方下载| www.040851.com-足球博彩概率学| www.595659.com-k彩福线路测速中心| www.308946.com-可以买七星彩的软件| www.443206.com-青蛙彩票网址导航网| www.557110.com-vr彩骗局-| www.20553.com-九度彩票登录地址| www.863197.com-彩票挂机软件怎么用| www.fe65.com-福彩3d解密数字| www.73655.cc-彩票77是合法的吗| www.175625.com-江苏快三助手安卓版| 500彩票www.50051t.com| www.948925.com-中国体彩网e球彩| 彩69www.022174.com| www.ki42.com-江苏快三倍投| www.92qe.com-八百万彩票下载| www.356140.com-腾讯分分彩软件网| www.77816.com-彩尊国际是真的吗| www.9684.loan-彩壹万彩票平台| www.155945.com-苹果能玩好彩客吗| www.277991.com-国家福彩中心地址| www.418630.com-足球彩票漏洞| www.079526.com-彩票助赢计划最准| www.mr03.com-七乐彩的玩法说明| www.043001.com-足球彩票的区别在哪| www.609041.com-百度贴吧彩票讨论版| www.750208.com-彩票界app-| www.861314.com-体彩排三开奖走势| www.948910.com-百度乐彩3d走势图| www.cp9033.com-专业购彩彩票平台| www.va87.com-易彩堂599tcc| www.345432.com-大无限捷豹彩票| www.460613.com-重庆彩票发行中心| www.555506.cc-神彩争霸注册邀请码| www.zn81.com-南粤福彩好彩三开奖| www.76858.cc-安微快三夸度走势图| www.469273.com-彩票开机关注号码| www.580617.com-体彩专管员考试试题| 易彩堂www.55885i.com| www.502308.com-白菜最新注册送彩金| www.di0.com-有多少人玩快三| www.qz07.com-玩快三为什么会输钱| www.007610.com-k彩是正规的吗| www.035673.com-魔方彩票靠谱吗| www.751.live-时时彩猜数字规律| www.6218.me-乐彩网摘17500| www.26112.cc-彩虹羽泉mv-| www.75533.com-竞彩篮球856| www.056753.com-网上彩票的骗局揭秘| www.371946.com-死神全彩色系漫画| www.708132.com-感情诈骗投资彩票| www.720310.com-七星彩中一注多少钱| www.60ey.com-易购彩票提现失败| www.1522.cc-博彩官方彩票网站| www.7830.me-彩票捕捉出没数字| www.41190.com-彩票直通车官网| www.93337.cc-q彩网是什么意思| www.060468.com-网上买彩票会怎么判| www.639538.com-发乐发彩票平台注册| www.00717.com-彩票销售结束时间| www.335127.com-快三查询结果| www.449823.com-沈阳福彩中心图片| www.gq93.com-彩票快三开奖时间| www.15391.cc-嘉兴福彩-| www.002231.com-福彩中奖后怎么领奖| www.079024.com-如何看彩票九宫图| www.512488.com-彩铅入门图片| www.621287.com-湖北快三开奖查洵| www.780595.com-旧版彩库宝典| www.857365.com-盈彩计划网-| www.944333.com-手游彩官网-| E彩堂www.43818t.com| www.981528.com-全民乐彩票是骗局吗| www.61384.com-仿冒彩票网站最| www.fd26.com-百彩网网址-| www.04ng.com-福利彩票36期开奖| www.498.me-重庆时时彩彩讨论群| www.331456.com-高手彩票字谜图谜| www.478862.com-竞彩足球双平高手| www.571018.com-查彩票中奖-| www.639209.com-彩票分析系统靠谱么| www.753661.com-百彩网网址是什么| www.826826.com-京东买彩票在哪里买| www.897108.com-福彩查询-| www.965566.com-玩时时彩算不算赌博| www.cai07.cc-彩票快3-| www.95676.com-福利彩票还有人买吗| www.126474.com-重庆时时彩被骗追回| www.45679.com-大乐购彩票注册网址| www.34030.com-怎样买彩票稳赢| www.092182.com-买彩票有年龄限制吗| www.00rd.com-彩虹怎么画-| www.286722.com-江苏快三今天走势图| www.503191.com-体彩任五开奖| www.632909.com-3d彩票怎么找火号| www.730033.com-周易预测大乐透彩票| www.877972.com-福利彩票中三个号码| www.966953.com-手机何时能投注彩票| www.cp5587.com-快三是不是骗局| www.ss39.com-台湾时时彩开奖记录| www.0468.cn-猜大小的彩票网站| www.137020.com-金彩网彩票资料| www.28yx.com-福彩3d魔图定胆图| www.2434.me-手机竞彩足球| www.vz04.com-贵州省福利彩票官网| www.294136.com-越南彩票结果查询| www.563110.com-依彩化妆品好用吗| www.647706.com-时时彩怎么买都输| www.731797.com-8k彩票违法吗| www.478894.com-江西九江体彩网| www.104769.com-昆明牛牛彩票| www.239125.com-套取彩票彩金| www.297837.com-湘潭市福彩中心在哪| www.cp3391.com-现在内蒙快三走势图| www.331039.com-彩神通关注码对应码| www.894883.com-彩票投注时间大乐透| www.53763.cc-金都国际时时彩网站| www.893286.com-彩票大师手机版| www.737628.com-旺彩网买彩票正规吗| www.20lj.com-彩虹6号第三年| www.813546.com-体彩加盟费-| www.3761.cn-二分快三遗漏数据| www.940521.com-下载3d彩票软件| www.71917.cc-71彩网址-| www.441966.com-香港十分彩合法吗| www.ag50.com-178彩票官网| www.980672.com-c99彩票平台| www.xg07.com-时时彩组合玩法漏洞|