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.638727.com-福彩资金包括| www.13722.cc-彩八彩票网页版登录| www.024517.com-彩福彩票官网| www.149553.com-彩民乐与阳光探码图| www.033445.com-快三豹子通中多少钱| www.544747.com-快乐十分在线彩票| www.637416.com-鑫彩注册-| www.789339.cc-足球竞彩跟单| www.893559.com-红牛彩票网-| www.977797.com-七星彩上十期开奖| www.tj5.com-广西快三一定牛形态| www.ut69.com-时时彩客户端| www.05322.com-彩票预测软件合法吗| www.773155.com-彩票怎么挣钱| www.962459.com-福彩1360亿真假| www.aq97.cc-贵州体育彩兑奖址| www.yh19.com-667彩票-| www.6356.biz-春秋彩票娱乐平台| www.0000.top-世彩堂app-| www.34969.com-彩视电脑版能用吗| www.688007.com-湖南福利彩票中心| www.986841.com-七乐彩预测号| www.j65.com-湖北省福利彩票中心| www.665464.com-七乐彩机选号码投注| www.400294.com-中国福彩中奖金额| 大赢家彩票网www.178652.com| www.py28.com-掌上七天彩-| www.30oz.com-七乐彩大奖兑奖流程| www.445523.com-体育彩票大乐透奖励| www.841022.com-竞彩与外围对冲公式| www.908885.com-极速赛车彩票软件| www.971142.com-福彩赛车是合法的吗| 幸运彩票www.778811aa.com| www.982149.com-新彩网i新彩网| www.111625.com-三分时时彩qq群| www.03nw.com-福彩aa牛彩会| www.66938.com-广东福彩中心主任| www.261960.com-福彩山东全图| www.573606.com-黑红梅方彩票机坑人| www.591621.com-救世主博彩论坛| www.895108.com-网投彩票合法吗| www.971208.com-体育彩票中奖结果| www.lv71.com-时时彩走势图软件| www.99946.cc-168彩票是黑平台| www.91927.cc-彩运网计划-| www.877148.com-福利彩票三d怎么玩| www.11968.cc-足球竞彩完场比分| www.23775.cc-彩票微助手怎关| www.205620.com-赢家彩票注册邀请码| www.732651.com-彩票三地子迷汇总| www.850308.com-今天3d彩民乐全图| www.919735.com-多赢吉林快三计划| www.982440.com-全天时时彩免费计划| www.c7.tv-快三怎么赔-| www.012266.com-七星彩2280-| www.158881.com-龙江福利彩票双色球| www.083271.com-彩雾彩票结果秒开奖| www.75228.cc-体育彩票大乐透开将| www.653673.com-亚州彩票首页| www.779229.com-天天时时彩票| www.868265.com-南国七星彩论坛规律| www.939582.com-如何审计福彩| www.990866.com-旺彩百家149| www.wz74.cc-今晚开什么奖七星彩| www.115871.com-网购足球彩票| www.399968.com-周三福彩开什么| www.838428.com-江苏快三是-| www.2119.cc-江苏休彩网-| www.8572.xyz-福彩3d中奖奖号| www.609786.com-华东福彩开奖| www.684666.com-体彩3d中奖规则| www.763369.com-网易彩专家预测| www.839273.com-彩票足球app| www.929193.com-玩彩网有问题吗| www.ed36.com-快频彩票-| www.540096.com-发彩网团队-| www.266049.com-快三复式中奖查询| www.398369.com-七星彩还未开的好| www.728780.com-大连体彩中心官网| www.823680.com-三彩2019连衣裙| www.887589.com-彩票中奖怎么兑奖| www.959055.com-3d新彩网藏机图| www.cai2789.com1分快3彩票官网| www.jc16.com-体彩官网报价大全| www.208659.com-湖北老快三走势图| www.297726.com-快三怎跟最好| www.360061.com-福彩投注下载官网| www.970184.com-燕赵福彩首页| www.xf1.com-大发彩票软件下载| www.ep83.com-福彩三d-| JJ彩票www.39058.cc| www.222195.com-甘肃体彩助手手机版| www.098122.com-国彩彩票是官网吗| www.09959.com-强力球彩票图片| www.34288.cc-多彩贵州网百万公众| www.620073.com-釉上彩怎么画| www.754948.com-新华彩票公司| www.881352.com-快三7期倍投方案| www.988235.com-华盛娱乐彩票平台| www.ov33.com-广西快三时间| www.74lq.com-3d助手彩吧走势图| www.838460.com-q彩客户端下载| www.715536.com-天天爱彩票微信提现| www.437722.com-小财神彩票-| www.555324.com-彩哥计划官方| www.629677.com-官网幸运彩票app| www.656895.com-足球竞彩奖金加| www.052278.com-星光彩票app完整| www.731052.com-胜负彩必发指数| www.881407.com-博彩彩票app| www.998947.com-今日头条彩库宝典| www.lm77.com-中彩网网站地址| www.940888.com-8816网络彩票| www.884442.com-杀号定胆一凤彩网| www.155141.com-足彩19044开奖| www.23jr.com-彩票是人为控制的| www.205386.com-淘宝彩票app| www.743694.com-立彩彩种-| www.52926.cc-好彩牛牛-| www.006871.com-百乐彩app-| www.377998.com-彩虹图-| www.009.me-亿彩五分快三计划| www.132981.com-60彩票app-| www.133425.com-天然彩色宝石| www.659024.com-开奖七星彩-| www.733030.com-福彩3d能网上购买| www.818012.com-奥博集团彩票| www.886923.com-福彩三d字谜汇总| www.83361.cc-体彩高手-| www.781652.com-快三输了钱怎么办| www.233840.com-福彩排列三-| www.29925.cc-江苏快三历史长龙| www.576018.com-官方福彩3d图表| www.654022.com-高手彩票网开奖查询| www.751503.com-彩票烂了能兑奖| www.803776.com-海南体彩官网首页| www.873187.com-500万彩票网购彩| www.949348.com-最新彩票中奖新闻| www.036356.com-彩票榜代理-| www.697576.com-七星彩机选号码投注| www.066236.com-彩票935-| www.027843.com-网络投彩是骗局吗| www.258042.com-彩票大赢家官网| www.08vh.com-体彩排三19053| www.828490.com-uk彩票平台-| www.892517.com-彩票榜平台-| www.953607.com-好彩香烟有几种口味| www.999195.com-大运彩票手机版登陆| www.cf87.com-凤凰网彩票合买| www.su90.com-体彩七星怎么算中奖| www.8gn.com-七星彩空白长条规律| www.90ai.cc-电竞博彩能玩吗| www.198331.com-牛彩快三走势图湖北| www.83729.com-买彩票作文-| www.264321.com-彩客网app旧版| www.947386.com-中国彩吧合法吗| www.443929.com-7意彩app下载| www.982009.com-99彩-| www.2gy.com-中国体育彩票挣钱吗| www.vg88.cc-福彩42期预测| www.745844.com-808福彩网址| www.021552.com-有游彩票吧-| www.954174.com-礼拜五开奖的彩票| www.nh5.com-快三彩票怎么玩法|