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.23.com-北京快乐彩是个骗局| www.321391.com-明发彩票app下载| www.9514.me-彩票工具一今日运程| www.218700.com-七乐彩3-| www.00028.com-彩色印刷包装厂| www.25ir.com-华彩横溢是什么意思| www.6599.win-英国彩票2002| www.941174.com-投资刷彩-| www.269536.com-彩九下载网站| www.919710.com-彩票手机app制作| www.144089.com-竞彩赚金被关停| www.580760.com-大通彩票导航网| 天天彩票www.54968f.com| www.8el.com-国外黑彩抓捕| www.999938.cc-大乐透彩民村走势图| www.984293.com-时时彩砍龙-| www.817850.com-新彩票走势下载| www.04ya.com-体彩历史开奖记录| www.781.tv-中国体育竞彩首页| www.5605.vip-最专业彩票程序开发| www.385446.com-福彩电脑版-| www.071772.com-彩票店吃票怎么解决| www.033784.com-如意彩票网注册| www.42279.com-qq彩色名字-| www.68rw.com-下载酷彩-| www.613691.com-福彩欢乐声肖| www.292935.com-河南快三任意俩码差| www.472762.com-陕西西安福彩机转让| www.595500.com-虎扑篮彩讨论区| www.709066.com-体育彩票软件有哪些| www.808922.com-柬埔寨五分彩官网| www.913511.com-彩客足球比分| 手机购彩www.sjgc5.com| www.0762.date-铁公鸡七星彩梦奖| www.320639.com-快三线上是真的吗| www.894214.com-皇冠彩票导航网址| www.212929.com-私彩单双-| www.951360.com-新华保险的金彩一生| www.cp981.cc-彩神8官网合法吗| www.630733.com-体彩竞彩怎么查中奖| www.734703.com-彩色沥青是什么东西| www.814027.com-高频彩票未来趋势| www.886484.com-优彩社区-| www.964203.com-彩票加倍规则| 彩票5www.594243.com| www.546579.com-私彩网站抓包| www.119084.com-快三平台福彩| www.286320.com-彩界发大财-| www.473003.com-福彩东方六十一开奖| www.577771.com-昨天排列五彩票| www.570158.com-五洲彩票线路检测| www.548808.com-分分彩刷量方案| www.623949.com-春秋彩票客服| www.699761.com-网易彩票安全可靠吗| www.777875.com-网易手机福彩查询| www.861623.com-彩宝贝网彩票开奖| www.948327.com-福彩快三和值技巧| 购彩之家www.gczj1.com| www.4513.cc-14场胜负彩销量| www.019140.com-牛彩网手机版| www.7185.cm-彩宝10大品牌| www.447012.com-足彩qq群俱乐部| www.579159.com-博乐彩票注册| www.203535.com-江苏快三走势| www.355476.com-几块快三官网| www.222214.com-体育彩票快乐十分钟| www.655390.com-玩彩可以赚到钱吗| www.ug48.com-大赢家彩票正规吗| www.686205.com-彩票500计划群| www.797181.com-天津时时彩直播群| www.886973.com-彩票骗局相亲| www.979316.com-福彩票开奖号码| www.fq52.com-福彩有幸运快三| www.g17.cn-海南体彩-| www.53dr.com-彩票行家丶com| www.538126.com-重庆时时彩天天计划| www.30877.com-多盈彩票平台官网| www.837607.com-竞彩滚球小4.5| www.545657.com-跳快三技巧视频| www.623702.com-盈盛彩票网站| www.3232.in-彩票999官方网站| www.139097.com-盈彩的意思-| www.443370.com-网易彩票代理挣钱吗| www.3989.in-河北福彩双色球中奖| 大赢家彩票平台www.760320.com| www.27672.cc-七乐彩走向图| www.78427.com-双彩网官网-| www.792656.com-快三数据专家触屏版| www.921685.com-吉林快三和值表图片| www.986795.com-篮彩实时比分直播| www.as35.com-上海市快三走势图| www.za75.com-分分钟彩票平台| www.9452.vip-免费助中奖彩票下载| www.699661.com-新浪彩票图走势图| www.0908.hk-彩票彩金导航| www.273863.com-老时时彩百位走势图| www.169928.com-吉林新快三开奖号码| www.270004.com-彩票77安卓-| www.503375.com-鸿鑫娱乐时时彩| www.c16.com-易彩娱乐测速| www.58yp.cc-炫彩图片制作| www.780897.com-赢彩彩票ios下载| www.527110.com-时时彩后二和值| www.603913.com-趣彩彩票正规吗| www.671279.com-体彩快乐十分钟预测| www.187287.com-体彩大乐透开奖号码| www.376234.com-彩票双机店整体转让| www.529741.com-时彩直播-| www.633408.com-网上怎么注册卖彩票| www.754300.com-彩天下-| www.88133.com-有充值红包彩票网站| www.255081.com-彩票指南报纸双色球| www.68161.cc-竞技体育彩票知识| www.505713.com-彩票能转职吗| www.45039.com-电玩挣钱软件送彩金| www.055513.com-体彩足彩玩法介绍| www.186548.com-江苏快三彩票网| www.514131.com-三地福彩-| www.574990.com-彩票公司系统出租| www.26595.com-南洋彩开奖现场| www.126624.com-微信可以买彩票么| www.229812.com-今天百盈快三走势图| www.342828.com-吉利三分彩-| www.408699.com-彩票站哪天放假| www.546262.com-599gcc易彩堂| www.627900.com-讯盈彩票是什么| www.694475.com-彩票中大奖的人知乎| www.779344.com-菠萝彩微尔算法| www.861753.com-彩客彩票手机下载| www.948222.com-竞彩258网-| 福彩网www.60007g.com| www.ip24.com-足球竞彩比分直播| www.208204.com-快三开奖结果青海| www.ql71.com-玩快三能回血吗| www.4um.cc-深圳体彩网首页| www.74es.com-彩宝app客户端| www.212711.com-手机彩票排名| www.863890.com-彩123论坛下载| www.419234.com-88彩-| www.546970.com-网彩平台骗局| www.597704.com-彩票猜谜-| www.268661.com-鸿彩网-| www.363601.com-生涯彩虹图理解| www.513018.com-双爆珠好彩香烟| www.658339.com-中乐彩333-| www.774181.com-英国五星彩-| www.953514.com-竞彩奖金怎么计算| www.qm00.com-福彩快三和值概率表| www.76qj.com-每天都可以买彩票吗| www.1946.tv-彩票诸葛白羊大推荐| www.168506.com-牛湖北快三走势图| www.296520.com-快乐彩票乐彩网| www.66396.cc-312彩票下载安装| www.030281.com-中彩网快三助手下载| www.730936.com-临渭区福彩店转让| www.794786.com-快三和值9多少注| www.929262.com-福彩网能玩吗| www.979024.com-好彩烟中国禁卖| www.33335.cc-彩票快3盈利方案| www.73758.com-云彩娱乐app| www.036320.com-老彩民快三平台下载| www.cai0611.com汀苏快三走势图| www.675290.com-679彩票网页| www.q52.cn-彩票弃奖报道|