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.66za.com-彩票欠账打官司| www.803915.com-世界杯彩票哪里买| www.902460.com-足球竞彩结果| www.980764.com-带竞彩的体彩店转让| www.fu89.com-彩票快三-| www.705545.com-辽宁体彩兑奖在哪| www.810436.com-体彩排列五开奖历史| www.898435.com-福利彩票结果怎么看| www.981140.com-用彩泥做冰淇淋| www.bd66.cc-安徵快三走势图| www.w32.club-彩神8app苹果| www.3658.tv-福彩3d返奖情况| www.13ui.com-体彩任选6中奖规则| www.fz25.com-彩票追号追死人| www.23796.cc-新3d彩票计划软件| www.817275.com-ig传统彩是真的吗| www.920363.com-快三的歌曲名字| www.qc68.com-十大正规的彩票| www.29hi.com-昨晚福彩出什么奖号| www.96361.com-福利彩票知识| www.057663.com-福彩3d资料-| www.185401.com-博牛彩票下载| www.265636.com-微信天天中彩票骗局| www.356246.com-如意分分彩助赢软件| www.55dh.com-体育彩票申办| www.0689.net-福彩店装修效果图| www.60kj.cc-福彩平台刷单| www.710137.cc-微信有人带你玩彩票| www.810638.com-悟空彩票下载安装| www.893870.com-金牛彩票网-| www.974764.com-彩票新闻双色球| www.aj78.com-体彩481任二技巧| www.44490.cc-彩色混凝土路面砖| www.mh65.com-时时彩图片-| www.229163.com-老梁说彩票的真实性| www.318542.com-高频彩为什么调整| www.392729.com-中国体彩直播网| www.516767.com-奇门遁甲测港彩| www.583768.com-彩色的梦小班教案| www.657242.com-3d时时彩游戏机| www.557.tv-分分彩抓号软件| www.315306.com-博彩公司-| www.456289.com-彩票管理机构| www.575545.com-竞彩实体店出票| www.784550.com-众彩网七星彩| www.869661.com-鸿运彩票提现不了| www.948010.com-体彩公益金-| 51彩票www.34736.com| www.994518.com-体彩19017排五| www.er90.com-8亿彩网是不是骗局| www.c21.mobi-足彩推荐分析预测| www.29va.com-长春体育彩票过户| www.228.cc-万博彩票层级维护| www.80dv.com-彩票2元h-| 天下彩www.420689.com| www.975892.com-彩礼起源-| www.211192.com-河北快三开奖奖金| www.925823.com-彩富网香港官方开奖| www.qz18.com-时时彩官方网站公告| www.4970.net-宝马彩票注册| www.280.cx-最新够力七星彩画板| www.396.cn-中彩网麒麟双色球| www.3710.vip-福彩三d走式图| www.609111.cc-世界杯彩票停售时间| www.624208.com-58彩票下载地址| www.721542.cc-七星彩说彩软件| www.z90.cc-明彩电影院-| www.65aj.com-河南7星彩开奖查询| www.207557.com-一分快三计划安卓版| www.690822.com-彩票网投平台黑钱| www.736289.cc-御彩轩计划软件免费| www.i55.org-河南快三走势图表| www.804113.com-火箭计划时时彩| www.22776.cc-吉林快三案-| www.86308.com-三彩品牌折扣店| www.18aq.com-注册送彩金88| www.7183.win-彩75是不是骗人的| www.18dm.cc-pc蛋蛋彩票安卓| www.6246.tv-五福彩正规吗| www.062332.com-彩神怎么取消银行卡| 大赢家彩票www.599416.com| www.bd5.com-彩票赚钱-| www.345920.com-彩之王彩种| www.477519.com-彩神通会员可靠吗| www.703538.com-福彩天地报官网| www.775391.com-7位数的彩票有哪些| www.841309.com-福彩内部号发说说| www.68933.com-彩票店主助手| www.188131.com-北京快三跨度怎么玩| www.53401.com-台湾彩虹台-| www.974993.com-福彩双色球技巧| www.lo1.com-福利彩票快三倍数| www.88zz.com-热购彩票技巧| www.h25.club-桂快3彩票分析计划| www.48pw.com-三国杀曹植和张星彩| www.769.in-时时彩改码诈骗| www.583970.com-真正的足彩大咖| www.6650.vip-新乐彩票登录平台| www.14215.cc-金华市福利彩票中心| www.863826.com-七星彩专家杀号预测| 500彩票www.50051w.com| www.135447.com-345快三彩票主页| www.903959.com-彩票游戏出租| www.338385.com-体彩复式投注表| www.604480.com-01彩票群-| www.533956.com-七星彩技巧与规律| www.398234.com-彩虹旗娱乐论坛| www.672795.com-彩宝彩种-| www.980334.com-709彩票com-| www.hc27.com-彩8骗局-| www.6tt.cc-购物送彩票宣传语| www.236827.com-中国体彩官网app| www.31518.com-开福彩店多少钱| www.11775.com-泰国彩票怎么中奖| www.298387.com-七乐彩单式开奖号码| www.567778.com-濠江彩票网址| www.778670.com-中国彩吧牛彩网| www.859743.com-时时彩票平台下载| www.913694.com-虚拟足球e球彩技巧| www.983149.com-下载竟彩足球| www.ha88.com-北京快三线路| www.984224.com-今日福彩3d无名图| www.fd18.com-百彩网手机资料| www.q98.club-体育彩票几元一注| www.z64.net-足彩卖料微信团队| www.332599.com-彩票多久过期| www.547696.com-河北曾中的彩票| www.23662.cc-网上彩票是真的么| www.7053.vip-什么彩票是七色的| www.168266.com-福彩精彩十分走势图| www.x87.top-能买足彩的棋牌软件| www.52906.com-港免绿好彩-| www.53573.cc-体彩任三开奖结果| www.008614.com-哪种彩票中奖率最高| www.577522.com-七星彩全国可领吗| www.670307.com-外国彩票公式| www.022931.com-3d天天彩-| www.768682.com-足彩app哪个靠谱| www.73et.com-彩亿彩票app下载| www.3036.vip-旧版360彩票选号| www.138215.com-福彩3d神器-| www.071001.com-足彩交易员招聘| www.527902.com-时时彩19-| www.6238.xyz-福利彩票十大巨奖图| www.31923.cc-彩票能发财吗| www.731010.com-梦想彩票站用户注册| www.354134.com-竞彩球队身价对比| www.50100.com-四场进球彩对阵| www.8604.me-陈翔六点半中彩票| www.29119.cc-快三老千-| www.64763.com-竞彩赌博-| www.002316.com-香港行政快三下载| www.140715.com-518彩票网app| www.139433.com-棒棒彩票是赌博吗| www.353370.com-京彩正规吗-| www.527946.com-儿童彩色画-| www.870330.com-彩票5分钟开奖| www.974115.com-福彩3d图纸解密| www.oc22.com-彩票平台送38彩金| www.122365.cc-优乐彩彩票提现不行| www.39986.cc-今日彩是什么| www.123213.com-江苏体育体彩票| www.377488.com-因为彩礼钱而分手| 大赢家彩票平台www.982570.com|