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.288132.com-优彩社区6603| www.jd53.com-派彩广西快3| www.77201.com-七星彩中奖率高吗| www.75705.com-体彩彩帮-| www.127797.com-彩虹岛2-| www.142727.com-官网彩8彩票| www.339493.com-查询丹东3d彩图| www.878128.com-西安福彩3d大奖| www.951230.com-500足彩比分| 万利www.32123l.com| www.60609.cc-六6开彩开奖记录| www.71822.cc-224大众彩票网| www.678221.com-体彩十一选5走势图| www.778823.com-中国体彩电脑网页版| www.793.win-请我易彩堂合法吗| www.199017.com-买体育彩票怎么买| www.360198.com-七星彩手机直播现场| www.130742.com-七星彩算法必中6红| www.ej.com-快三彩票规则| www.781714.com-彩票中多少钱要交税| www.901816.com-貴州福彩下载| www.979093.com-广州哪有好彩烟| www.ll14.com-彩票巴士如何| www.184778.com-湖北快三开奖图| www.330828.com-彩票争霸是真的吗| www.532958.com-六星彩网站-| www.763470.com-井彩荃人人网| www.886107.com-超级时时彩-| www.34531.com-福彩三d出奖| www.575312.com-时时彩家网出租| www.531335.com-老版彩库宝典苹果版| www.30860.com-彩16安卓版时时彩| www.579696.com-七星彩明月珰19楼| www.713729.com-福彩3d毒胆高手榜| 东方国际www.001036.com| www.133699.com-福建体彩票开奖结果| www.318494.com-福彩排列7月查询| www.513632.com-时时彩5星复式计划| www.652809.com-贵州快三推选号| www.886106.com-正规外围足彩网站| 500彩票网www.611306.com| www.zv20.com-老重庆时时开彩| www.93tk.com-小清新彩色背景图片| www.666838.com-双色球彩民-| www.854366.com-pp彩票官方-| www.ys42.com-山东福利彩票兑奖| www.39hp.com-彩票教学中奖视频| www.740922.com-幸运28彩-| www.833198.com-口袋彩店如何下载| www.713932.com-福彩3d百万通软件| www.188410.com-安徽快三购买| www.nn73.com-福彩双色球下期预测| www.7725.space-致富彩票下载安装| www.019355.com-双色球中奖彩票真图| www.672636.com-七星彩第三位走势| www.365489.cc-谜彩天地高清图| www.949230.com-北京快三能买大小吗| www.681373.com-豪彩是黑平台吗| www.769601.com-好彩中免绿-| www.906751.com-福彩地方彩种开奖| www.975945.com-旧够力七星彩奖表| www.cp0303.com-河北快三助手| www.69ys.com-红菜苔彩票平台买| www.26iv.com-这个足球彩票竞彩网| 幸运彩票www.031566.com| www.920553.com-35彩-| www.283581.com-vr十分彩开奖号码| www.728294.com-体彩综合版走势图| www.612909.com-福利彩票双色球窍门| www.632452.com-福彩打错号如何解决| www.722109.com-彩票走式图-| www.203392.com-湖北快三开奖时间| www.212468.com-彩票站加盟-| www.852315.com-时时彩盈利计算| www.788161.com-送38元的彩票| www.869527.com-彩神软件骗局揭秘| www.207803.com-时时彩过滤工具手机| www.281681.com-时时彩定位胆买九码| www.8211.in-卖彩票的工作好干吗| www.123634.com-彩神通修改软件| www.851.red-天吉彩票网址| www.6576.xyz-姓名幸运号选彩票| www.522536.com-分分彩开奖统计数据| www.71948.com-富民彩票计划网站| www.644729.com-体彩大奖-| www.733207.com-一分钟时彩骗人的| www.807830.com-竞彩中心套利| www.880466.com-一分快三计算器| www.978978.com-彩票站怎么开| www.d68.space-杏彩彩票平台靠谱吗| www.33zr.com-湛江七星彩头尾开奖| www.125714.com-厦门福彩兑奖中心| www.073489.com-宏发快三开奖| www.194400.com-最全的快三彩票平台| www.887097.com-富彩彩票靠谱吗| 彩票8www.cp8003.cc| www.eo63.com-快三单双大小下载| www.yt94.com-香港中彩堂开奖结果| www.62nd.com-义乌市最近的彩票店| www.00264.com-章鱼足彩微博| www.692.cm-竞彩网是什么网| www.6615.top-茂腔罗彩记全集| www.3082.me-台湾福星彩资料大全| www.01130.cc-彩金国际娱乐| www.52355.com-范本彩金-| www.590332.com-苏宁彩票旗舰店| www.828019.com-彩民争霸app下载| www.ee88.com-江苏快三怎么刷流水| www.405458.com-彩票合买保底赚钱| www.509041.com-广发彩票网页计划| www.b45.cn-江西福利彩票销售额| www.31lm.com-奇门测彩3d实例| www.98wq.com-体彩7位数开奖日期| www.941289.com-彩票套利是怎么套的| www.995553.com-购彩之家下载| www.nz11.com-头彩网江苏快3| www.431030.com-利彩是怎样的骗局| www.191837.com-一分快三怎么看走势| www.12168.com-足球彩票圈论坛| www.88321.cc-春天彩票网站| www.040981.com-重庆时时彩长龙记录| www.124666.com-彩票助手哪个好用| www.778353.com-彩助手首页-| www.118514.com-麒麟彩票网骗局揭秘| www.x68.top-财神8彩票是真的吗| www.47fm.com-长沙体彩销售网点| www.773947.com-彩博888资料网站| www.627780.com-3d乐彩论坛专| www.747521.com-爱彩彩票网官方| www.830507.com-彩票娱乐平台论坛| www.948799.com-幸运五分彩玩法介绍| 幸运彩票www.037211.com| www.2376.wang-福彩排列四开奖号码| www.388245.cc-宽甸华彩-| www.536543.com-辽宁体彩年销量| www.516.red-o38彩票客服电话| www.955643.com-中国足彩竞猜官网| www.cai95.cc-长春快三-| www.177.tv-超真实的彩铅画| www.3097.cc-亿博大发时时彩计划| www.11ul.com-游戏厅彩票能换币吗| www.96fw.com-哪个彩票会有时差| www.2235.vip-彩薇花官方旗舰店| www.315725.com-彩虹网络电视直播| www.404544.com-彩铅的颜色搭配图片| www.497163.com-今日彩票幸运选号| www.912094.com-买私彩注意-| www.111665.com-淘宝彩票停售原因| www.30gq.com-全国各种彩票开奖| www.36795.cc-幸运28是什么彩票| www.982847.com-共享彩票靠谱吗| www.8341.link-东方彩票网平台| www.8749.loan-远途国际彩票可靠吗| www.3963.biz-中彩堂论坛-| www.663973.com-头彩app下载| www.356334.com-智慧彩票苹果版| www.444756.com-专业彩票助手彩吧| www.525575.com-网易彩票预测推存| www.620771.com-彩宝贝七星彩杀号| www.24307.cc-大发时时彩开奖| www.642376.com-今日七星彩开结果| www.780626.com-彩虹宝宝英文版| www.864683.com-彩膜和钢化膜的区别| www.925225.com-全网快三-|