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天

知道了
1分快三 www.608.la-创世红海彩票代刷| www.2052.cc-彩虹森林儿童画| www.289928.com-彩库宝典app下载| www.551514.com-粤彩网11选五| www.531069.com-一定牛内蒙快三预测| www.626683.com-七天彩邀请码| www.030706.com-福利彩票摇奖池| www.340039.com-彩票恶搞软件| www.96ns.com-福彩验票吗-| www.149360.com-38彩票软件下载| www.152209.com-澳客赢家彩票| www.244342.com-辽宁彩票网站首页| www.337949.com-体彩排列三精准双胆| www.425886.com-天下彩票会员料| www.567080.com-起了彩票大发快三| www.646121.com-竞彩算赌博吗| www.738353.com-快购彩票网快购| www.817704.com-一彩票图谜总汇| www.257837.com-乐迎彩票app| www.344938.com-彩栗开奖结果查询| www.441508.com-招聘彩票销售人员| www.537498.com-彩色是几种颜色| www.609050.com-分分彩后三后二杀号| www.679161.com-注册就送彩金的游戏| www.755142.com-安装中彩网-| www.837765.com-竞彩黑单最长几天| www.903728.com-9万彩票下载地址| www.965696.com-福彩刷人气靠谱吗| 500彩票www.330716.com| www.jt03.com-中国竞彩网官网| www.14fo.com-福彩快三中奖安全吗| www.450691.com-杏耀彩票可信吗| www.65554.cc-杏彩官网注册| www.954656.com-竞彩外围投注app| www.5781.cn-福彩领奖强制捐款| www.55250.com-天津时时彩票开奖走| www.087236.com-3d福彩走势图带线| www.8537.xyz-彩票2元网怎么样| www.868966.com-今天福彩3d开机号| www.960240.com-淘彩可以玩吗| www.cp161.com-江苏快三是什么平台| www.83489.com-西安彩票分析师招聘| www.50721.com-福利彩票的走势图| www.051883.com-旧版九万彩票安卓版| 亿彩www.6832y.com| www.963594.com-做彩票代理怎么赚钱| www.cai0344.com快3彩票中奖规则| www.581406.com-公众号签到送彩票| www.664567.com-自然风景彩铅画简单| www.770146.com-一分时时彩怎么玩| www.839326.com-49期胜负彩预测| www.915308.com-网上买彩票赌博报警| www.975007.com-234彩票平台| www.ge7.cc-江苏快三最新遗漏表| www.080343.com-198彩官网-| www.98zx.com-台湾极速快三| www.380930.com-彩尊登录网址| www.344578.com-体育彩票排七| www.789113.com-模拟彩票软件| www.875034.com-彩票坊是正规的吗| www.965444.com-下载彩神争霸| 天下彩www.420689.com| www.mq21.com-时时彩四星大底| www.2kh.com-彩票输了4万怎么办| www.17348.com-彩神软件破解版| www.9898.bid-彩49平台-| www.11959.cc-中国竞彩赛果| www.tp97.com-安徽快三是违法吗| www.247759.com-彩票阿基米德定律| www.677236.com-爱投彩票能挣钱吗| www.eg14.com-345彩票-| www.yh18.cc-贵州快三中了多少钱| www.07226.com-完美分分彩走势图| www.044056.com-福彩3d开奖106| www.493344.com-彩钢瓦喷漆机器| www.593102.com-七彩花店-| www.667708.cc-吉祥彩票用户登录| www.739161.com-开彩吧官网-| www.z45.wang-九州彩神8-| www.558937.com-彩虹屁文案大段| www.654225.com-彩票淘宝走势图| www.743458.com-众彩铁路导购线| www.818581.com-摇色子彩票-| www.887688.com-87彩票推广基地| www.953328.com-牛牛网彩票福彩| 818合彩www.www.1555hc.com| www.85ec.com-体彩店过户-| www.259722.com-彩票选号大师| www.984701.com-炫彩动态壁纸| www.587949.com-福彩3d三星缩水| www.217561.com-湖北福彩中心地址| www.209293.com-怎样买彩票中奖率高| www.318189.com-彩票助赢计划网| www.430544.com-近50期足彩星象图| www.602484.com-瑞典2分彩-| www.2007.date-和彩颜料-| www.942664.com-众彩易购是真实的吗| www.128237.com-中体彩彩票-| www.217524.com-五福彩app-| www.603191.com-福利彩开奖记录| www.49944.com-球探足彩app下载| www.162076.com-央视封足彩-| www.510595.com-彩虹屁是好是坏| www.657302.com-ok精彩杂志-| www.727318.com-幸运彩票是不是真的| www.672628.com-七星彩兑奖时间| www.42rl.com-苹果x原彩显示失灵| www.311588.com-彩之家双色球走势图| www.805185.com-七乐彩怎么七个号| www.945318.com-福建体彩网阿四论坛| www.999039.com-彩乐汇彩票合法| www.355496.com-中福在线快三| www.484477.com-人人中彩票刑拘| www.569806.com-彩88开奖-| www.680660.cc-宁夏体彩中心地址| www.848968.com-38彩票领导者| www.997476.com-丰盈彩票app下载| www.116332.com-彩票双色球红号分析| www.828581.com-518彩官网开户| 星际www.910xj.com| www.74im.com-经纬时时彩平台网址| www.853325.com-体彩网点怎么验真假| www.09931.com-彩票51下载苹果版| www.560101.com-彩票百分百计划网| www.29mn.com-体育彩票游泳是什么| www.595412.com-淼鑫彩票app| www.366733.com-兰州福彩快三| www.383502.com-足彩戴维最新推荐| www.506815.com-彩票能研究出来吗| www.593219.com-7彩阳光大酒店几星| www.675036.com-永恒彩票网站| www.762573.com-彩票批发多少钱一张| www.851717.com-七乐彩开奖结果公布| www.928488.com-往期彩票大奖号码| www.cp466.com-安徽快三开奖走势| www.693251.com-辽宁福彩网投注指令| www.195458.com-河北快三预测推荐表| www.159535.cc-彩票分析网站| www.263958.com-体彩买几个号码| www.100797.com-乐彩网静坛版| www.484820.cc-银川千彩摸吧| www.703639.com-深圳福彩官网登录| www.723592.com-常州福彩-| www.916224.com-凤凰时时彩平台| www.cp104.cc-购买双色球彩票| www.f13.cc-七乐彩开奖奖金多少| www.188.net-彩铅难吗-| www.501588.com-福利彩票选号区域| www.647296.com-七乐彩136-| www.770545.com-幸运彩是什么意思| www.879544.com-奥客彩票网智慧赢家| www.979978.com-如何开福利彩票店| www.gp73.com-河南彩礼不超过8万| www.262195.com-网购彩票能赚钱吗| www.74zq.com-联运彩票-| www.38881.com-旺彩娱乐官方注册| www.um53.com-快彩快三助手下载| www.nh23.com-快三网赚平台| www.0109.cn-555彩票网app| www.5069.cn-重庆时时彩开奖查询| www.352311.com-青蛙彩网下载| www.2785.cc-彩票甘肃十一选五| www.410710.com-唯彩会彩票app| www.320853.com-百宝彩贵州11选五|