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.792823.com-快乐十分开奖百宝彩| www.97068.com-福彩蛋-| www.709137.com-体彩大乐透领奖时间| www.818818.cc-今日足球竞彩二串一| www.1446.cn-澳门博彩在线游戏| www.619206.com-491彩票下载| www.654738.com-彩票带玩给佣金| www.543567.cc-中国体彩报彩票推荐| www.017129.com-彩票20选8-| www.0813.date-足彩店怎么开| www.454318.com-三地彩吧图迷| www.760196.com-时时彩宝典网址| www.6148.cm-福彩票3d-| www.01sv.com-3d千禧近十期彩吧| www.947961.com-体彩七星彩推荐号码| www.lp97.com-中彩网能提现金吗| www.547457.com-网上购彩软件安全吗| www.650213.com-虚拟体育博彩| www.64if.com-四川体彩中奖号码| www.369487.com-闽南体彩聊天室| www.991523.com-玩彩票输了报警有用| www.ng27.com-竞彩足球彩客网| www.873574.com-有优惠的彩票平台| www.909559.com-乐彩客下载app| www.972275.com-福彩3d魔图高清| www.cai555.cc-福建彩票快3| www.818756.com-七星彩倍数怎么算| www.938363.com-网上非法出售彩票| 乐迎彩票www.tang444.com| www.208178.com-彩票图-| www.296351.com-快三追号真坑人| www.367348.com-彩专家改网址了吗| www.459306.com-济宁福利彩票| www.8000.hk-亲子彩虹伞玩法| www.34029.com-玩彩彩票安卓叫什么| www.24288.cc-彩铅如何画苹果| www.74205.com-七乐彩11中4| www.418258.com-鼎盛国际投彩| www.574733.com-糖果彩平台-| www.661803.com-竞彩4串11-| www.967017.com-河北省体育彩票电话| www.cai2234.com河北快三豹子遗漏| www.ne07.com-038彩票存在欺骗| www.14sw.com-安徽彩票中奖| www.754.pw-快三导师带计划| www.hb79.com-新浪福彩3d预测| www.95oj.com-c语言体育彩票问题| www.654938.com-网络正规彩票平台| www.77907.com-互娱彩票聊天群| www.65438.com-快三全部号码走势图| www.251157.com-彩49官网-| www.332331.com-体彩竞彩输了很多钱| www.409864.com-福彩扑克牌-| www.506806.com-买彩票能研究吗| www.569329.com-体彩三句话字谜区| www.632791.com-七彩娱乐注册| www.702516.com-私彩代理加盟| www.773067.com-微信彩票群是骗局吗| www.838155.com-彩票查询七乐彩开奖| www.898046.com-哪里可以代买足彩| www.964272.com-彩票号码筛选软件| 幸运彩票网www.33598j.com| www.7415.pw-色彩三要素指的是指| www.30694.com-网上福彩是违法吗| www.0939.biz-万豪彩票助手下载| www.nz68.com-足彩最新最快开奖| www.162081.com-分分时时彩是否有假| www.638.la-天齐福彩3d网| www.254739.com-北京快三-| www.609262.com-七星彩19043| www.683640.com-天天爱彩票手机版| www.788685.com-怎么看足彩投注量| www.905505.com-e球彩赔率对照表| www.16396.com-如何支付宝买彩票| www.375537.com-特区七星彩论坛首页| www.550851.com-合买彩票合法吗| www.618286.com-省体彩主任-| www.684668.com-彩乐网福中网香港| www.760651.com-秒秒彩漏洞稳赚技巧| www.sm91.com-e球彩3场全包奖金| www.18jz.com-买彩票如何选号| www.265432.cc-快乐彩票快三| www.095889.com-竞彩体彩群-| www.629964.com-竞彩足球强胆推荐| www.719622.com-高频彩开奖原理| www.807386.com-彩博士计划软件官网| www.886786.com-大大彩票可靠吗| www.961204.com-分分彩跨度的规律| 亿彩堂www.87668n.com| www.28yn.com-腾讯有个彩票软件| www.0871.space-福利彩票购彩平台| www.85038.com-买什么彩票中五百万| www.681.website黑彩刷流水赚百万| www.071229.com-白菜彩票大全| www.61612.cc-七星彩开奖决果| www.057222.com-福彩安徽快三网站| www.217725.com-福彩快三怎么下载| www.054320.com-快乐彩12选5计划| www.948913.com-百度开奖彩票| www.27767.cc-福利彩票红区中三个| www.107586.com-01彩票ios-| www.yo93.com-体育彩票多久过期| www.141272.com-58彩票旧版首页| www.cp8.cm-福彩5d没了-| www.630425.com-齐乐彩开奖-| www.735233.com-概率说彩-| www.832085.com-七星彩模拟摇号器| www.910222.com-3d彩报一至五版| www.973464.com-图片彩虹大全| www.uf83.com-彩票打漏洞提前开奖| www.198078.com-双彩网论坛-| www.413623.com-河南豫彩通官网| www.991879.com-福彩快三是真的假的| www.qw39.com-有人玩快三发财的吗| www.336466.com-快钱彩票是正规的吗| www.526112.com-竞彩足球推荐310| www.622915.com-传奇彩票是赌博| www.684131.com-猎豹团队购彩平台| www.771473.com-保时捷彩票网| www.829986.com-盈彩客服-| www.918810.com-新时彩走势图| www.976042.com-彩礼的历史-| www.ht96.com-快三怎么追一个对子| www.u92.com-买时时彩用哪个软件| www.260601.com-网上买快三能挣钱吗| www.144078.com-竞彩足球平局排除法| www.946000.com-周口女方彩礼| www.so7.cc-分分彩技巧想输都难| www.z73.club-神彩网3d论坛| www.95jx.com-女孩用彩的意思| www.19ql.com-买彩票是几位数| www.079.win-爱心彩登录-| www.121104.com-彩票群起名-| www.817337.com-八号彩票app下载| www.768009.com-官方淘彩网-| www.888950.com-elg彩票-| www.956199.com-七星彩今天出什么码| 福彩网www.60007q.com| www.3703.com-体彩十一运夺金查询| www.16611.cc-五百彩票网比分直播| www.216575.com-中国快三第一| www.89355.cc-顶级彩票dk-| www.963636.com-足彩彩票怎么买| www.cai6789.com河北快三今天推荐号| www.x89.com-酷玩手游彩票| www.51tm.com-竞彩比分波胆赔率| www.562.gg-七彩乐开奖结果今天| www.28ik.com-星耀国际彩票有人带| www.68492.com-福彩怎么领奖的| www.820481.com-中国体彩中心客服| www.919686.com-可以出票的假彩票机| www.75933.com-出售中奖彩票| www.787818.com-彩客化工-| www.938.red-体彩胜平负奖金查询| www.899745.com-彩81网站-| www.988521.com-下载全民福彩票| www.ba43.com-福彩积分卡查询| www.xw05.com-体育彩票可以折叠吗| www.18jp.com-亿彩天虹软件使用| www.8373.biz-买彩票官方客户端| www.25158.com-水溶性彩铅画怎么用| www.504276.com-节目彩排的说说| www.508826.com-北京福彩如何兑奖| www.01wf.com-鼎吉国际彩票怎么样|