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.838354.com-澳彩欧赔分析技巧| 三星娱乐www.sxyl6.com| www.522203.com-齐鲁福彩网-| www.145602.com-足彩网胜平负| www.251579.com-一号网彩票官网| www.874291.com-808七星彩票网| www.133737.com-白羊3d预测新彩网| www.280806.com-时时彩官方网网址| www.978929.com-500mvp彩票-| www.go22.com-内蒙古彩票快3| www.z15.shop-双色球彩友吧式机号| www.324755.com-马来西亚博彩犯法吗| www.55624.com-彩漆方格十字纹竹席| www.072785.com-综艺福彩骗局| www.318743.com-快三微信群骗局揭秘| www.436433.com-北京快彩-| www.558570.com-彩虹旗寓意-| www.207108.com-购买双色球彩票机选| www.323289.com-百度乐彩app| www.671186.com-彩经排列5杀号| www.799140.com-网彩交流群-| www.015975.com-彩票中奖提醒app| www.111756.com-彩票注册送彩金吗| www.121922.com-彩票排列11011| www.210502.com-快三大平台-| www.287983.com-能合买的彩票app| www.47ws.com-新浪彩票爱彩网| www.106198.com-90年代的福利彩票| www.730022.com-福彩3d选号软件| www.796946.com-数字流运预测彩票| www.918730.com-u9彩票苹果app| www.984141.com-彩8彩票邀请码| www.dq08.com-省份快三是怎么回事| www.z51.cc-c8彩票下载-| www.4885.me-彩票老司机无法提现| www.13731.com-湖南福彩开奖信息| www.65707.com-南方双彩网预测号码| www.8329.cn-心灵码仙七星彩最新| www.24vt.com-华彩益彰什么意思| www.88615.com-彩聊软件下载| www.776445.com-重庆时时彩最新通知| www.871055.com-七星彩带坐标走势图| www.948396.com-福彩双色球主任是谁| www.999873.com-网易彩票为什么停售| www.ax99.com-七乐彩4+0-| 福彩www.2109d.com| www.qt58.com-福彩是假的吗| www.64fd.com-叶子主持福彩| www.67nn.com-竞彩用哪个app| www.1638.tv-彩票中奖内部人买卖| www.8452.top-博友彩是怎么运行的| www.809822.com-香港旺彩4肖8码| www.881741.com-q彩网大发快三| www.948045.com-牛彩专家-| 天天中www.99ttz.com| www.96ca.com-投彩的意思-| www.6771.org-重庆时时彩龙虎规则| www.03se.com-购彩iv下载-| www.94og.com-溴客彩票网-| www.555536.com-星宇购彩怎么玩| www.680957.com-中福彩票安全吗| www.848616.com-时时彩改欢乐生肖| www.996898.com-福利彩票2元走势图| www.088260.com-新浪彩票频道电脑版| www.227783.com-盈利彩票中的快三| www.00zy.com-福彩快三直选玩法| www.85mp.com-彩神通关注码金码| www.qf04.com-彩票77官网app| www.1ci.com-乐彩网用户登录| www.051766.com-三分快三是什么软件| www.728068.com-彩票83-| www.890163.com-时时彩计划下载安装| www.988166.cc-中国福彩网官网登录| www.ov49.com-山西福彩前三走势图| www.590805.com-徐州八集彩票中奖| www.065622.com-223彩票app-| www.152602.com-浙江风采网竞彩区| www.247292.com-上海彩票兑奖处电话| www.1741.vip-彩鸿彩票合法吗| www.62928.com-和彩宝彩票合法吗| www.928788.com-百乐彩客户端下载| 彩票大家乐www.21202w.com| www.nr1.com-河北快三今天走势| www.247212.com-快三甘肃开奖今天| www.511170.com-彩虹周杰伦写给谁| www.qn59.com-公益福彩江苏快三| www.434094.com-乐彩网版本下载| www.552424.com-彩票分析师是骗子吗| www.640865.com-九万彩票客服中心| www.759220.com-上海福彩网正规网站| www.959231.com-国内彩票大奖排行榜| www.cp8771.com-快三是福彩还是体彩| www.878918.com-福体彩开奖公告| 彩69www.022184.com| www.982076.com-双色球凤彩网预测| www.760303.com-神彩飞杨3d专栏| www.869211.com-聚丰彩票app| 500彩票www.330687.com| www.657117.com-时时彩能买吗| www.042688.com-竞彩经典宣传语| 福彩www.16878w.com| www.f62.net-中国福利彩票副主任| www.222512.com-快三和值预测公式| www.756.mobi-时时彩后二和值表| www.02639.com-中彩娱乐官方网站| www.53991.com-时时彩交易平台| www.387135.com-未派彩是什么意思| www.95343.com-福彩3d姜太公字谜| www.597608.com-尊彩网首页-| www.771767.com-重庆7时彩是什么| www.pj84.cc-彩票如何赚钱| www.g15.org-下载彩计划软件| www.43bs.com-重庆试试彩走势| www.07589.com-体彩竟彩网-| www.591643.com-海南开放博彩| www.775585.com-uc彩票是不是诈骗| www.854087.com-彩乐乐江苏快3| www.913957.com-谁有瑞彩祥云邀请码| www.970509.com-网彩开售2019| www.31vo.com-星期三体彩开什么| www.436204.com-福彩三地跨度表| www.5168.vip-彩虹旗是什么意思| www.cp2606.com-江苏快三中奖多少钱| www.cp9896.com-中国福彩快三走势图| www.nw.com-中国竞彩网比分直播| www.2893.top-天中布衣图好运彩| www.25922.cc-七色彩虹的寓意| www.274679.com-玩脑者时时彩软件| www.487898.com-贵州快三计划群| www.88524.cc-578彩票官网| www.227627.com-福利彩票一分钟一期| www.6376.vip-红牛彩票兼职靠谱吗| www.91967.com-顺丰彩票官网首页| www.187391.com-时时彩漏洞赚钱教程| www.272501.com-时时彩20分钟一期| www.341881.com-诺亚网彩平台| www.448277.com-新浪分分彩开奖| www.555945.com-美狮彩票推荐人账号| www.320435.com-十一选五百宝彩浙江| www.435303.com-福利彩票14人贪污| www.553622.com-竞彩半全场高手| www.467258.com-足彩开奖公告开| www.799499.com-时时彩彩票aqq| www.s48.bid-博彩免费体验金论坛| www.111808.com-广发彩票-| www.340006.com-彩票收米图片| www.351478.com-买一注彩票多少钱| www.192281.com-双彩论坛17500| www.313592.com-安徽快三走势下载| www.752377.com-中彩国际彩票学院| www.332889.com-河南福彩网幸运之门| www.387528.com-手机彩膜定制机器| www.33188.cc-福彩3d预测汇总| www.603685.com-足彩大数据分析| www.107644.com-中福彩票群-| www.157714.com-足彩盈亏指数应用| www.422848.com-足球彩票推广哪家好| www.133843.com-大发快三倍投方案| www.088139.com-亿彩吧-| www.151250.com-福彩3d彩报银海| www.72ty.cc-懂彩的卖彩票可靠吗| www.797002.com-98彩票害了我一生| www.88730.com-广西双彩综合走势图| www.115946.com-有人带你买彩票赚钱|