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.528806.com-体彩店竞彩赚钱吗| www.9927.cm-广州汇彩路-| www.159027.com-网易彩票大乐透试机| www.23228.cc-七彩色是哪七种| www.872060.com-六盘水彩票中奖情况| www.488076.com-怎样下载福彩app| www.22334.cc-拒绝高价彩礼承诺书| www.4729.biz-福利彩票到哪里申请| www.883961.com-黑彩一分快三窍门| www.xg46.com-97彩票下载app| www.7313.net-彩虹桥图片-| www.82456.com-体彩表格-| www.109718.com-盈彩用户注册| www.439079.com-广西彩票中心在哪| www.ad06.com-智慧网福彩走势图| www.809358.com-时彩倍投倍数选择| www.973274.com-彩虹岛在线av| www.1gs.cc-3d福彩乐彩网首页| www.tw59.com-澳洲分分彩害人| www.8893.vip-下截红旗彩票| www.102070.com-买篮球彩票能挣钱吗| www.529309.com-大佬彩票平台| www.976694.com-宜宾彩礼-| www.421111.cc-胜负彩19023期| www.924811.com-全球最高彩票奖金| www.92vy.com-福利彩票中奖那些人| www.17164.com-大乐透彩票价格| www.066190.com-送彩金网大全| www.187641.com-内蒙古福彩快三预测| www.318163.com-彩票买什么彩种好| www.468033.com-手机百胜彩票| www.414488.com-彩98app网站| www.26295.cc-彩吧vipapp-| www.cp486.cc-网易彩票-| www.7181.vip-国外博彩怎样拉客户| www.13114.cc-今日稳胆竞彩推荐| www.699773.com-福彩专家给好| www.929073.com-众盈彩合法正规吗| www.qk56.com-中原彩票是不是骗局| www.734401.com-凤彩网3d胆码| www.815624.com-搜狐福利彩票双色球| www.895349.com-彩票网站怎么提现| www.967888.cc-彩票能中奖吗| 500彩票www.607323.com| www.ry43.com-腾讯分分彩后三杀一| www.26jf.com-广东福利彩票加盟| www.080.link-机选七星彩中一等奖| www.3844.in-足彩19039凯利| www.9564.cm-别有风彩的意思| www.46145.com-彩神uv打印机深圳| www.46yc.com-开体彩店能赚钱吗| www.975284.com-彩票奖号-| www.cp856.com-快三投注平台哪个好| www.nf85.com-快三官网下载安装| www.t78.cc-网上拉人买彩票| www.55sx.com-湖南体彩大乐透开奖| www.0175.org-彩色什么什么| www.85qa.com-七乐彩周五走势图| www.473944.com-极速快三必出| www.576335.com-广西快三app| www.655483.com-体彩红孩双胆今天| www.22003.cc-558赢彩能信吗| www.293235.com-河南福利彩票网站| www.396892.com-下载多彩宝-| www.514469.com-湖南彩票论坛| www.602895.com-悦彩文化-| www.682120.com-买彩票微信拍照| www.773819.com-时时彩直选做号技巧| www.7779.pw-竞彩足球技巧| www.275620.com-时时彩控制开奖结果| www.531380.com-彩铅古风绘画| www.699885.com-彩客app正规吗| www.815649.com-福彩3d表格大全| www.936325.com-凤凰彩票vlll| www.436066.com-体彩5808万-| www.608130.com-福彩3d太湖谜| www.730987.com-浙江福彩61生肖| www.922719.com-嘉兴福利彩票店转让| 同乐彩票www.703617.com| www.10jv.com-时时彩独胆必中方法| www.0692.pw-体彩退机申请书| www.33478.cc-彩票预选走势图软件| www.97154.com-高频彩票辅助软件| www.293961.com-查江苏快三遗漏号码| www.387268.com-手机彩首奖-| www.185142.com-福彩快三二十分钟| www.343224.com-乐彩网安卓版下载| www.613236.com-彩票程序源码出售| www.950075.cc-3d胆码家彩网杀码| www.0531.in-app买彩票-| www.04216.com-竞彩微信-| www.111023.com-518彩票下载安装| www.223615.com-福彩跨度-| www.261728.com-福彩内蒙快3吧| www.520242.com-七星彩纶坛特区| www.14043.com-全国赌竞彩的人| www.313535.com-拼搏在线彩票试机号| www.448012.com-夺金三分彩-| www.16891.com-横彩网网站-| www.03029.com-江苏快三一注多少钱| www.68245.com-中国彩票快乐12| www.050824.com-时时彩如何才能赢钱| www.220177.com-福彩三天计划独胆| www.469407.com-有极速赛车的彩票| www.788667.com-足彩分析推荐预测| www.922762.com-人人种彩票-| www.hw46.com-彩票三中三技巧| www.58280.com-下载升级版网易彩票| www.86yc.com-彩票最近开奖号码| www.5170.vip-永济南山华庭彩票| www.733064.com-福彩七乐彩开奖公后| www.298286.com-福利彩票历史开奖| www.487111.com-体彩店过户-| www.591705.com-福彩三d所有图表| www.703293.com-福彩新天地报| www.847605.com-辽宁福彩手机| www.940452.com-易彩快三怎么玩| 全民彩票www.76762.cc| www.947511.com-体育足彩app| www.360424.com-广西福彩快乐十分开| www.076270.com-彩票是商品吗| www.171766.com-贵州省福彩兑奖中心| www.268973.com-933cc彩票-| www.755209.com-福彩山地带线走势图| www.876463.com-大掌柜彩票不能提现| www.960907.com-微信快三骗局解密| 博乐彩票www.35918v.com| www.537555.cc-中彩网3d字谜论坛| www.666649.cc-福彩中心在什么地方| www.755871.com-彩色苹果图片| www.825153.com-六彩开奖结果最新| www.880126.com-彩票头奖领奖程序| www.942811.com-福彩3d奇偶走势图| www.982454.com-鴻彩网-| www.ie3.cc-快三平台代理提成| www.81412.com-江苏快三登录| www.874463.com-新浪分分彩计划| www.237709.com-彩店宝竞彩店骗局| www.346883.com-明彩笔-| www.333238.com-助赢分分彩软件下载| www.7271.loan-六开彩c8万彩吧| www.55343.cc-福彩三g走势图| www.073709.com-买彩票都是穷人知乎| www.248487.com-福彩3d彩吧库| www.100214.com-彩票禁止网络销售| www.383468.com-英国有什么彩票开奖| www.599288.com-怎样学买彩票| www.710810.com-刷彩单-| www.03369.com-七星彩骗局会员| www.f75.cn-菲律宾500彩票| www.241099.com-简单彩铅画小清新画| www.318964.com-三分时时彩平台| www.266280.com-足彩19038任九| www.324366.com-乐彩是不是正规的| www.373965.com-福彩三d直选走势图| www.445394.com-德惠彩票销售电话| www.519605.com-今晚体彩排列五预测| www.571365.com-人人中彩票还能买| www.433119.com-甘肃福彩票-| www.94gb.com-彩票159安卓版| www.4617.vip-中彩票要告诉父母吗| www.99yx.cc-体育彩票分类| www.268017.com-随州福彩社区论坛| www.411893.com-彩票双色球中奖查询|