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.986365.com-福彩金手指报纸| www.885307.com-彩票计划吧-| www.130692.com-快彩论坛-| www.bk82.com-彩票106cc苹果| www.195747.com-江苏快三直选走势图| www.318422.com-快三和值跨度表图片| www.150202.com-幸运中彩票天天中奖| www.720658.com-刮刮乐福彩自助终端| www.975154.com-网上快三的套路| www.66628.com-彩吧3d红五图库| www.470059.com-体彩网中奖号| 幸运彩票www.917699.com| www.914945.com-全天广西快三计划网| www.088780.com-彩名堂计划4.0| www.211556.com-浙江有快三吗| www.339476.com-竟赢彩票合法吗| www.477427.com-彩铅画花朵图片| www.617799.com-彩礼什么时候给合适| www.oo25.com-福彩刮刮乐品种图片| www.g12.cc-海南本地彩票| www.60bk.com-彩票开奖结结果| www.92bq.com-刷竞猜赚彩金| www.8221.in-赔率高的赌彩网站| www.360280.com-七星彩一共几位数| www.zv77.com-彩98app-| www.209.cm-简单水溶彩铅画图片| www.8856.in-彩狮-| www.106756.com-彩票雙色球-| www.250767.com-app快三彩票平台| www.491662.com-众购彩票平台登录| www.783542.com-什么是会员彩票| www.86um.com-足球彩票怎么买法| www.58458.com-汇西多乐彩11选5| www.028411.com-新瑞博彩票-| www.152631.com-彩之-| www.287285.com-福彩快3走势图安徽| www.464910.com-彩之家彩票网如何| www.626900.com-今日彩票幸运号| www.926683.com-中彩票多钱-| www.oy24.com-在微信群玩彩票| www.cp1678.cc-十分快三走势图| www.066842.com-金百博彩民乐园| www.363803.com-彩虹各种颜色的含义| www.009168.com-代玩彩票工资10%| www.151876.com-体彩排列三预测荐号| www.331636.com-天福彩票官网| 天际彩票www.tj92.com| www.5823.cn-竞彩八串一-| www.053357.com-快三越玩越亏| www.466198.com-盛世彩票下-| www.022628.com-快三走势图爱乐彩| www.665818.com-直播彩票游戏平台| www.192979.com-购彩ll-| www.772949.com-彩票玩家分为| www.9714.loan-彩票店销量急剧下降| www.192533.com-11选五彩票网站| www.315498.com-时彩后13458| www.9645.cn-凤凰彩票外挂| www.192293.com-上饶彩票中奖人被杀| www.217802.com-内蒙古时时彩彩开奖| www.dl43.com-体彩竞彩玩法介绍| www.95938.com-福彩题库-| www.407043.com-彩礼超两万-| www.829420.com-福彩速查图表| www.hc94.com-分分快三害惨人| www.054959.com-国模彩炮图-| www.679591.com-人人中彩中过大奖吗| www.fu.cc-快三江苏基本走势图| www.42ud.com-下载彩视最新版本| www.11482.com-彩票双色球机选模拟| www.326007.com-彩经网排三新版| www.709832.com-亿彩安卓-| www.6876.vip-双色球中彩票秘籍| www.885964.com-彩票平投-| 500万彩票www.626990.com| www.941948.com-福彩十选5-| www.882512.com-英国5分彩官方网站| www.623251.com-658彩票app-| www.116192.com-网站彩票分析师| www.707229.com-彩计划最新版| www.894790.com-天天时时彩助手最新| www.267195.com-辽宁快三开奖结果| www.534799.com-本期六开彩开奖结果| www.967105.com-体育彩票竞彩提成| www.ir18.com-一分钟快三下载安装| www.405567.com-济宁福彩招标| www.038619.com-快三派奖-| www.19133.cc-足球彩票中奖经历| www.353619.com-彩票版区开开开| www.665083.com-欢迎使用078购彩| www.905461.com-足彩任九场投注| www.cp62.cc-内蒙快三综合走势图| www.23xl.com-还出售的网络彩票| www.028101.com-爱投网彩票-| www.685430.com-双彩球39-| www.918182.com-体育彩票福建官网| www.511158.cc-怎么黑进彩票app| www.697688.com-彩票资料网址大全| www.7250.org-彩虹六号冷知识| www.056.tv-198彩客户端下载| www.237159.com-福建体彩网11远5| www.415666.com-足彩本金比例投注法| www.0335.date-幸运时时彩趋势图| www.2888.live-福彩3d倍投-| www.874263.com-福利彩票开机号| www.ua71.com-快三一倍多少钱| www.8569.xyz-网上彩运来app| www.48245.com-三星福彩是真的假的| www.032927.com-安然七星彩预测号码| www.208873.com-千万彩票app平台| www.290341.com-内蒙古福利彩票开奖| www.365916.cc-幼儿彩铅画动物图片| www.454650.com-博彩十大公司| www.684883.com-爱投彩票可靠吗| www.542316.com-彩票选几个号| www.020641.com-贵阳福彩官网下载| www.7955.wang-730彩票软件下载| www.699751.com-nba体育彩票分析| www.461236.com-福彩3d独胆死规律| www.803573.com-兼职彩票群跟买彩票| www.ql17.com-江苏快三百度百科| www.015845.com-体彩山东扑克牌玩法| www.18xv.com-廖彩杏书单-| www.pm52.com-彩涂铝板用途| www.832261.com-7彩网彩票app| www.008357.com-胜负彩19006期| www.629796.com-三位数字彩票怎么买| www.596887.com-福利彩票倍数怎么打| www.748922.com-7彩网是真的假的| www.985450.com-足彩不中反-| www.cz29.com-彩神x软件-| www.qj90.com-快三500彩票| www.22mu.com-网上哪个彩票平台好| www.797227.com-吉祥彩票-| www.964253.com-买足彩稳胜技巧| www.106805.com-瑞彩祥云输钱| www.853663.com-头条彩票4-| www.264663.com-手机网上怎么买快三| www.451191.com-七乐彩头奖领奖| www.539134.com-567彩票跑路了吗| www.591771.com-青海体育彩票网管网| www.659463.com-北京皇都彩票| www.786512.com-福彩软件真的假的| www.840890.com-竞彩店主举报外围| www.906777.com-哪些福利彩网站正规| 澳客彩票www.105ak.com| www.iq95.com-体彩排三直选遗漏| www.o33.top-分分彩票计划软件| www.21166.com-河内时时彩开奖结果| www.028693.com-江苏快三下-| www.96eo.com-彩带礼花-| www.883993.com-3d乐彩网走势图| www.686487.com-澳彩初盘-| www.981717.com-2019彩票网下载| www.598.cm-最热门私彩-| www.5239.top-派彩是什么-| www.9660.loan-万彩工具箱-| www.37336.cc-皇室彩票合法吗| www.73382.com-博发彩票开奖网址| www.012203.com-乐透彩票-| www.527357.com-七星彩今晚开什么| www.685200.com-福彩3d多邦预测| www.751432.com-六开彩开奖记录白姐| www.808612.com-万彩吧凤彩网|