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.658884.com-七星彩出过豹子号码| www.367801.com-彩票与生活报纸网址| www.386381.com-韩国彩票818期| www.is01.com-彩票软件下载中彩网| www.3xj.com-彩票是谁创建的| www.68tk.com-万达彩票计划| www.888775.com-78彩票推荐人吗| www.982465.com-辉腾团队鸿彩平台| www.am02.cc-下载河北福彩快三| www.640560.com-天下彩票金彩网论坛| www.839611.com-福彩宣传语-| www.491143.com-app云购彩票| www.618088.com-彩票真的中不了| www.839709.com-彩泥贴画-| www.912418.com-七乐彩推荐号码| www.980085.com-内蒙福彩块3推荐号| www.cp9836.com-808彩票网-| www.7202.cn-手机彩票777下载| www.55972.cc-网易人人中彩票没有| www.388507.com-迷彩图片手机壁纸| www.307398.com-爱彩乐十一选五| www.079.date-利彩摇骰子-| www.019124.com-利彩5分快3-| www.sn93.com-时时彩免费开挂软件| www.23688.com-四季彩提现问题| www.472251.com-还有哪些彩票软件| www.266998.com-体育彩票走势| www.400466.com-辽宁福彩35开奖号| www.564765.com-时时彩双胆投注| www.657593.com-福建体育彩票31| www.737159.com-众彩网首页登录| www.638612.com-上海体育彩票总店| www.771047.com-菠萝时时彩预测软件| www.878486.com-中国福彩网积分卡| www.965454.com-01彩票是合法的吗| www.cai4422.com中国福彩快3内蒙| www.778405.com-彩乐网址多少| www.880227.com-内蒙福彩在哪下载了| www.959045.com-99彩票官方通道一| www.ap27.com-贵州省体彩兑奖处| www.yk41.com-福彩兑奖查询| www.32fb.com-雨后一抹彩虹图片| www.1937.site-河南体彩手机下载| www.7569.shop-中国最大的彩票公司| www.30775.com-彩票计划助手| www.299889.com-中彩娱乐5分彩| www.8801.in-彩票出码分析仪| www.691672.com-澳客胜负彩必发指数| www.781440.com-卓易彩票正规| www.863146.com-彩票544-| www.939941.com-江苏11选5爱乐彩| www.995006.com-0500彩票可靠吗| www.eo70.com-大快三下载-| www.uq27.com-福彩500期-| www.183920.com-今日贵州快三出奖号| www.058073.com-1233彩票app| www.411035.com-手机下载安装唯彩会| www.9687.org-六今彩全年资料| www.79727.com-宁夏体彩中心电话| www.206878.com-152彩票真的假的| www.935310.com-苹果彩票app登录| www.fx3.com-江苏爱彩乐快三| www.03vr.com-彩票资料报刊大全| www.299807.com-买彩票输了几百万| www.254953.com-7星彩票开奖结果| www.653752.com-两张彩票网盘| www.212096.com-彩票加盟需要多少钱| www.320216.com-幸运快三是私彩吗| www.02700.com-安徽福彩快3预测| www.949509.com-宝丽彩票-| www.614234.com-最新大马彩-| www.365184.cc-红中彩票会员登录| www.583079.com-彩票动态图片| www.759213.com-马来三分彩免费计划| www.922926.com-云南彩票11选5| www.108927.com-博友彩票手机软件| www.729504.com-新浪爱彩彩票走势图| www.874032.com-七乐彩2012-| 豪彩VIPwww.529355.com| www.500929.com-彩色一寸照-| www.163998.com-彩票刷大底-| 818合彩www.www.1555hc.com| www.910730.com-福彩快三专业团队| www.cai5455.com廊坊快三-| www.42pu.com-彩钢扣板多少钱一米| www.7700.cn-xfcp幸福彩票| www.117635.com-足球彩票十四场开奖| www.188748.com-彩经网大乐透杀号| www.078043.com-五分彩倍投骗局| www.225223.com-福建福彩快三| www.rp34.com-彩票与赌博的区别| www.3wq.com-55彩票微博日赚| www.9132.biz-足彩胜负彩十四场| www.060051.com-如何报复黑彩平台| www.519600.com-大乐透彩民乐字谜| www.220144.com-中彩网擂台赛| www.51981.cc-体彩中大奖彩票单| www.ty81.cc-怎么预防彩票长龙| www.596944.com-体育彩票105| www.761047.com-各地彩礼陪嫁一览表| www.007350.com-幸运彩3132下载| www.206113.com-5分彩-| www.586626.com-福利彩票资讯网| www.5093.com-彩票幽默笑话| www.334528.com-滴滴彩票怎么样| www.402344.com-快三导师微信号| www.611596.com-彩虹代刷网源码下载| www.684343.com-体彩排列三专家杀号| www.155609.com-信誉好的彩票app| www.249163.com-大发彩票官网网址| www.380129.com-如向杀七乐彩号码| www.478032.com-深圳体彩杯-| www.927848.com-6位数的彩票有哪些| www.981991.com-安徽福彩快3开奖果| www.lc16.com-505彩票网站| www.17bi.com-今晚彩票全部开奖| www.1280.xyz-佳彩d669-| www.8753.pw-360网易彩票| www.53757.com-彩民了阳光-| www.564646.com-雷州七星彩梦册奖表| www.9530.top-买彩票一般几位数| www.2908.wang-一分彩开奖记录| www.27012.com-微信华彩彩票| www.0112.net-奖金最多的彩票种类| www.191559.com-人人中彩票二等奖| www.914499.com-网上彩票有什么漏洞| www.ix.cc-彩票北京快三开奖| www.vy82.com-唐山福彩中心在哪| www.139023.cc-福彩头奖多少钱| www.214718.com-全民快三官方网站| www.984632.com-彩八彩票有没有漏洞| www.100797.com-乐彩网静坛版| www.796429.com-亚洲彩票运行多久了| www.881481.com-博彩app怎么制作| www.960183.com-风之彩彩票是合法吗| 68彩票www.68682k.com| www.ym91.com-体彩阿四荐号| www.do03.com-彩票团队专业导师群| www.695861.com-爱彩彩票官方| www.758488.com-九九彩票是黑彩吗| www.hq69.cc-福彩迷快3-| www.43ue.com-汇彩网是不是骗人的| www.5400.com-体育彩票七星彩历史| www.047018.com-国乐彩app下载| www.43869.com-御彩轩害死了多少人| www.660245.com-爱买彩票-| www.32921.com-e彩在线手机版| www.432449.com-福彩市场管理员| www.780298.com-彩票机申请-| www.877078.com-分分彩漏洞-| www.13af.com-520彩票网址| www.fj65.com-福彩3d跨度表| www.wt02.com-天津畅赢彩票大案| www.yl98.com-大乐购彩票开奖时间| www.131293.com-彩礼和嫁妆的区别| www.6222.biz-快乐五分彩开奖结果| www.37237.com-福彩3d计划软件| www.449361.com-大佬黑彩平台| www.308429.com-马来西亚彩开奖结果| www.070895.com-官方彩票365| www.196394.com-体彩开奖号码| www.03352.com-七星彩庄家代理| www.517211.com-靠谱的彩票平台国外| www.603117.com-世界杯哪儿买彩票|