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.4621.vip-重庆时彩稳赚绝招| www.287846.com-最全的彩票导航| www.04099.com-福彩双色中奖说明| www.710115.com-彩票老台子-| www.67874.com-春节后福彩开奖时间| www.037749.com-七乐彩缩水软件下载| www.108092.com-足彩胜负彩中奖| www.234021.com-送彩金彩票平台| www.1197.cc-彩票路珠怎么分析| www.u00.win-全国时时彩开奖平台| www.877473.com-今日彩票指南报纸| www.990744.com-有人用澳客赢家彩票| www.hx89.com-e球彩两场全包| www.09qe.com-中福快三规则| www.6488.vip-七乐彩组选专家杀号| www.04532.com-高频彩票新政| www.352518.com-网易彩票能买| www.489633.com-国家禁止售卖彩票| www.002330.com-安徽快三数据专家| www.373330.com-500彩票咋样| www.499636.com-进口彩铅笔56色| www.595794.com-瑞彩彩票app| www.668218.com-cc在线彩票-| www.747868.com-昜彩堂软件下载| www.826262.com-超级彩票系统| www.905635.com-百性彩票-| www.970474.com-广西快三时间开奖| www.cai6200.com江西快三走势图表| www.02gr.com-彩虹纹身标志同性| www.73ir.com-炫彩之剑哪里出| www.155330.com-体育彩票胜负彩规则| www.21572.cc-爱投口袋彩票合法吗| www.719122.com-为什么彩虹是弧形的| www.83970.com-跨省得彩票怎么兑奖| www.832036.com-体育彩票足球结果| www.e95.win-七星彩年后开奖时间| www.0819.vip-欧冠冠军足彩| www.250657.com-中福彩票快3| www.333732.com-彩票怎么介绍| www.415374.com-七彩影院影讯| www.535725.com-什么彩票7位数| www.268599.com-湖南福彩中心地址| www.351744.com-福彩销售提成| www.427178.com-网易体彩大乐透直播| www.064022.com-体彩足彩计算器| www.zg02.com-网易快三计划| 财神网www.29277d.com| www.370908.com-时时彩票是什么| www.560453.cc-体彩地方彩-| www.526956.com-今晚竞彩分析| www.720627.com-天马彩票app| www.405849.com-彩礼排行榜-| www.181492.com-福彩十分快乐走势图| www.247515.com-福彩三大d开奖| www.963447.com-中国足球竞彩网下载| www.858493.com-彩天地-| www.80530.com-球彩体育-| www.496999.com-直击黑彩-| www.198445.com-内蒙古快三遗漏豹子| www.234666.cc-福利彩票aqq| www.335918.com-河北快三遗漏值统计| www.32991.cc-百乐彩娱乐官网| www.154529.com-博雅彩票登录| www.434584.com-福彩3d字谜鬼六神| www.499969.com-彩票发计划招聘信息| www.657904.com-福彩机子连接电视| www.919504.com-彩票网搭建-| www.nf17.com-038038彩票-| www.06nv.com-福彩今日开奖吗| www.291133.com-内蒙快三预测彩乐| www.7391.live-色彩构成马赛克图片| www.71520.cc-幸运彩02-| www.5259.net-香港赛马三重彩公式| www.187663.com-xj福利彩票-| www.877556.com-买私彩报警-| www.940840.com-众彩网火烈鸟大乐透| www.987076.com-购彩堂是什么| www.ap09.com-福彩精华布衣天下2| www.731656.com-彩色透水混凝土厂| www.866453.com-七星彩计算公式教程| www.962604.com-京东彩票网址| 大赢家彩票网www.83033w.com| www.wv05.com-免费送彩金棋牌游戏| www.320836.com-众彩乐-| www.024883.com-体育彩票奖池是多少| www.217208.com-快三全国统一吗| www.413734.com-博彩是干什么的| www.554809.com-彩票五期选号方法| www.808282.com-大富豪彩票黑平台| www.906979.com-山西体彩官网| www.961932.com-澳门买足球彩票| www.130900.com-正规网上买彩app| www.859916.com-十分彩的骗局| www.856727.com-公海彩票官网| www.574119.com-用数学算法买彩票| www.766372.com-中国福彩快三图表| www.888216.com-汇彩国际骗局揭秘| 凤凰彩票www.77803w.com| www.qr85.com-福彩发行原则| www.64cn.com-360彩票对比| www.3295.win-彩色简笔画人物| www.350929.com-真有彩票中奖符| www.085627.com-体育彩票神器| www.gb4.com-北哀快三-| www.879503.com-大师彩票是不是真的| www.470776.com-彩名堂下载网址| www.379266.com-竞彩足球分析师招聘| www.004219.com-即是开彩-| www.064669.com-谁有安全的彩票平台| www.179139.com-北京快三遗漏号数据| www.259788.com-江西新快三和值推荐| www.32rs.com-乐透彩票规则| www.839535.com-足彩欧赔-| www.rm20.com-苏州体育彩票网点| www.7698.net-特彩吧高手网499| www.278851.com-福建体彩网31选7| www.088983.com-彩票4+1多少钱| www.185331.com-分分时时彩开奖结果| www.286345.com-炫乐彩票是赌博吗| www.aq42.com-贵阳福彩申请| www.63ul.com-彩票网租-| www.527090.com-华富鼎博盈彩票被骗| www.751246.com-彩票巴巴下载ios| www.432186.com-彩票一等奖号码| www.673665.com-古建筑彩绘颜料配料| www.780120.com-福彩三d今天关注号| www.839745.com-福彩今日新鲜事| www.877712.com-足球博彩算赌博吗| www.6fh.cc-分分彩辅助软件| www.63382.cc-河南周口彩礼| www.nr14.com-内蒙古快三和值图| www.500017.cc-时时彩群主判刑| www.611645.com-双彩网论坛app| www.713160.com-香港160彩票| www.823511.com-彩涂铝卷出口| www.933269.com-快三计划群的秘密| www.ag71.cc-信誉彩票-| www.02rn.com-世界杯哪里有彩票| www.75od.com-专业古建彩绘图片| www.1919.me-重庆时时彩客户端| www.6663.bid-彩1平台是黑平台呢| www.246754.com-彩票走势图软件下载| www.02640.cc-彩票领奖可以代领吗| www.57338.cc-七星彩规律软件下载| www.120489.com-彩票提成-| www.874733.com-彩吧全图3d图谜| www.0967.vip-风采与风彩区别| www.58cs.com-贵州体彩官方版| www.194.cm-三地天天彩报| www.35fo.com-腾讯分分彩规律大全| www.023944.com-购买网上私彩| www.080878.com-彩票九宫魔方| www.55bd.com-中大奖彩票网真假| www.5522.cc-河北省体彩中心网站| www.97922.com-即开型彩票兑奖期限| www.676543.com-足彩预测彩票| www.978214.com-彩钢瓦凹槽-| www.pb56.com-彩票团队带赚导师| www.57041.cc-球彩app哪个好用| www.312588.com-鑫彩娱乐靠谱吗| www.833982.com-炫彩皮肤什么意思| www.47zd.com-乐乐彩票真假问题| 乐发彩票www.5881.cc| www.89255.com-安全的彩票应用|