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.401686.com-703彩票心水图| www.3922.in-福利彩3d开奖| www.39765.cc-706彩票下载| www.518192.com-国家体彩中心领导| www.750155.com-手机在线购彩平台| www.842563.com-体彩公益金申请| www.939115.com-国际新浪足球彩票网| www.996324.com-北单和竞彩的区别| www.bl96.com-福彩快三app苹果| www.te58.com-江西彩票时时彩| www.41ux.com-小孩七彩球-| www.623688.com-财富彩票黑吗| 5号彩www.565hc.com| www.fl34.com-江苏快三推荐号和值| www.i58.biz-南方双彩网预测| www.65nl.com-彩麒麟怎么越养越红| www.1484.vip-彩客论坛-| www.7821.biz-足彩必赢法-| www.92018.com-长沙体彩兑奖中心| www.096700.com-千亿彩票手机版下载| www.205033.com-江西11选五多乐彩| www.288636.com-彩票如何追长龙| www.18ys.com-百花仙子七星彩数据| www.756.hk-时时彩猜数字怎么猜| www.5012.wang-吉林块3彩票| www.24685.cc-彩铅画秋-| www.74144.com-彩之网首页手机版| www.034991.com-福建坤彩邓玉红| www.123249.com-乐乐彩票开奖| www.210584.com-一分快三赢了| www.283720.com-新浪福彩开奖直播| www.357577.com-合股买彩票协议| www.451008.com-彩票欠账打官司| www.542363.com-福l彩双色球开奖| www.611972.com-河北省体彩中心主任| www.682216.com-306+彩票-| www.559064.com-开奖公告爱彩网| www.671338.com-乐彩双色球字谜图迷| www.786078.com-手机彩票双色球兑奖| www.891822.com-安装北京快三走势图| www.963940.com-qq彩票是正规的吗| 99福彩www.356686.com| www.mc52.com-58彩票网-| www.r88.cc-河北体彩一定牛| www.61qr.com-彩票38官方网站| www.0922.xyz-怎么和别人合买彩票| www.77626.com-好彩堂资料中心| www.034211.com-七乐彩发行年限| www.121098.com-福彩双色球选号软件| www.207111.cc-七乐彩票骗局| www.279869.com-时时彩最新版本下载| www.353853.com-福彩3d网络直播| www.431566.com-类似于91彩站联盟| www.522666.com-中华彩票公益时报网| www.587764.com-旧版万彩吧下载安装| www.661530.com-足彩主和什么意思| www.768269.com-福彩复式价格表| www.845967.com-竞彩足球概率| www.917989.com-玩彩票大平台怎么样| www.979391.com-收贵州快三查询| www.sx5.com-福彩开奖时间| www.zm33.com-彩神x邀请码怎么弄| www.34jd.com-广东腾彩印刷| www.1695.cn-厘模式彩票平台排名| www.09010.com-33彩票怎么样| www.53752.com-澳洲时时彩官方网| www.009787.com-快乐公益竞猜彩票| www.115921.com-手机上玩彩票输了| www.229984.com-彩票赚钱送体验金| www.309016.com-68彩票平台-| www.371017.com-彩票站转让合同范本| www.457489.com-形容买彩票的诗句| www.539783.com-超级时时彩计划| www.615687.com-体彩是选几个数字| www.717056.com-彩铅画能保存多少年| www.835810.com-好彩三八今期现| www.894943.com-彩票行家c0m| www.961481.com-掌上彩49887| 58彩www.44458c.com| www.nn87.com-彩票随机号码生成器| www.26wu.com-今天福利彩票的报纸| www.95us.com-足竞彩比分直播| www.2947.cc-体彩店装饰-| www.00099.com-全民中奖彩票下载| www.40569.com-能提现的彩票网站| www.81183.cc-即开彩直播-| www.036635.com-福彩3d选号过滤器| www.104053.com-好彩堂红财神报| www.165882.com-彩票快三赚钱| www.234088.com-体彩五开奖-| www.313140.com-大发快三计划助手| www.373504.com-高鸿彩票app| www.456086.com-8828彩票输钱| www.535057.com-福彩3d布衣精华| www.596376.com-福州福利彩票| www.659840.com-七星彩早版湛江版区| www.756952.com-全民彩票网页手机版| www.822099.com-网上彩票投注兼职| www.885996.com-彩虹的约定视频| www.952225.com-稳赚彩票计划| 博亿彩票www.656by.com| www.612021.com-买足彩软件哪个好| www.062450.com-发大财彩票骗局| www.06hk.com-体彩竞彩平包括什么| www.1015.vip-福利彩票政策调整| www.598735.com-买彩票qq群的新闻| www.hp15.com-上海快三点了| www.62.cm-彩票学堂-| www.76651.cc-连云港彩票获奖查询| www.772621.com-时时彩分成-| www.eu66.com-北京5分彩-| www.345.red-黑彩平台网址| www.9180.vip-彩票直播app下载| www.026034.com-淘彩票app下载| www.282484.com-新浪竞技彩票| www.467862.com-体彩被停机了怎么办| www.63cm.com-今天福彩3d彩民乐| www.419212.com-港版绿好彩哪里买| www.636188.com-彩虹六号无人机| www.45876.cc-中华福彩app| www.353921.com-五百万彩票网真吗| www.509386.com-彩票频道新浪| www.682697.com-微信购彩票合法吗| www.786152.com-海南私彩论坛头尾| www.cp662.com-快三app哪个好用| www.d18.cc-彩票开奖七星彩开奖| www.86ze.com-国家禁止售卖彩票| www.88670.com-444彩票下载| www.146543.com-竞彩网开奖结果| www.323305.com-七乐彩历史开奖| www.509026.com-山东省云彩宝彩票| www.603433.com-三晋福彩网论坛| www.781997.com-python彩票-| www.886278.com-大發彩-| www.73ba.com-体彩排列三杀尾杀跨| www.3939.top-足球竞彩半全场玩法| www.11309.com-新浪胜负彩开奖| www.332548.com-最大的黑彩平台| www.655125.com-够力七星彩安卓版下| www.729548.com-8k彩票app主页| www.821692.com-仙家算彩票-| www.926363.com-江西体彩超级大乐透| www.lr55.com-旺彩双色球官网下载| www.90og.com-现在足彩在哪里买| www.21367.com-今天竞彩足球跟单| www.68612.cc-七乐彩票主页| www.310131.com-陕西体育彩票| www.88425.cc-澳大利亚强力球彩票| www.8623.biz-彩票机怎么联网详图| www.060111.com-三分快三专家预测| www.231934.com-最正规的彩票软件| www.395523.com-全天彩是真的吗| www.591237.com-竞彩大部分人是亏| www.730542.com-靠谱的买彩票软件| www.851821.com-老徐说彩今日3d| www.012265.com-体彩春节停售| www.415472.com-足球竞猜体彩| www.663431.com-vr彩票的软件| www.919004.com-河南快三跨度| www.63262.cc-365竞彩-| www.033743.com-彩川ひなの图片| www.33vl.com-七星彩那几天有| www.75yi.com-台湾福星彩开奖网站| www.7576.org-外围足彩赔率|