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.365696.cc-今天体彩p3中奖号| www.96812.cc-安庆竞彩店交易排行| www.400247.com-多彩数据快乐12| www.604971.com-福彩微信交流群号码| www.480.cm-新浪体育彩票13| www.0113.top-体育彩票有几种形式| www.960442.com-竞彩宝安卓-| www.v77.net-微信彩票群拉人技巧| www.805.win-彩虹糖中的泡沫| www.29631.cc-大地彩票登录网站| www.001221.com-竞彩篮球比赛不全| www.06sg.com-福利彩票店面装修图| www.54024.com-238彩票app-| www.mv24.com-福彩3d定位秘诀| www.731844.com-彩色包装厂-| 亿发彩票www.901391.com| www.781419.com-爱彩人彩票-| www.516527.com-三地彩票图迷汇总九| www.000071.com-优游彩票-| www.508547.com-东莞市福彩中心电话| www.375114.com-好彩特供香烟图片| www.170563.com-广西快三形势走势图| www.283195.com-彩票中奖内部秘密| www.833609.com-双彩球走势图| www.981769.com-跟计划买彩票真的吗| www.nr00.com-极速快三计划官网| www.29iv.com-福利彩票三位数| www.936159.com-够力七星彩梦册网| 千百万彩票www.qbwc3.com| www.le48.com-河北冀彩宝官网| www.024111.com-南京福彩中心图片| www.51yg.com-福利彩旗下的快开| www.2112.pw-福利彩票3d42期| www.30in.com-彩虹代刷正版查询| www.003405.com-一分快三的技巧| www.236061.com-彩票预算软件| www.206780.com-彩票平台拉人骗局| www.qy20.com-快三手机助手安| www.011269.com-私彩代理高返点| www.161226.com-北京彩票站加盟| www.490342.com-微彩票合法吗| www.130974.com-河南彩礼超2万| www.vd48.com-智慧彩票预测官网| www.501578.com-福彩双色球规则玩法| www.582617.com-重庆分分彩平台登录| www.525518.com-时时彩后三组六组三| www.459388.com-蓝精灵彩报今天图b| www.030828.com-彩61平台-| www.7532.win-乌鲁木齐竞彩店| www.158437.com-体彩北单实体店联系| www.366214.com-彩票开奖几点| www.554015.com-冠亚彩票网-| www.11683.com-泰国彩票查询| 网易彩票www.26163z.com| www.264865.com-靠谱的彩票投注网站| www.6334.pw-彩票最近中奖事件| www.024580.com-河南福彩网网址| www.171176.com-河北快三电视走势图| www.153771.com-七星彩往期中奖查询| www.06qd.com-快三14点-| www.023464.com-百胜彩票网站| www.100101.cc-百宝彩湖北11选5| www.356486.com-饭店送彩票活动| www.ah41.com-中国体彩网福彩网| www.ua62.com-福彩术语-| www.08au.com-手绘彩铅室内效果图| www.71ij.com-体彩排三图迷| www.60304.com-开发黑彩-| www.85028.com-随州福利彩票| www.091518.com-百万彩票是真的吗| www.036211.com-五分彩预测软件| www.147918.com-网络彩票投注员兼职| www.202071.com-福彩双色球彩票软件| www.ki44.com-竞彩赛果-| www.04ig.com-七天彩邀请码注册机| www.892571.com-英超足彩怎么买| www.6215.wang-家彩网胆码杀码| www.111821.com-微信上高德彩票| www.5668.cc-马来西亚福彩字画| www.964961.com-体彩中心官网首页| www.095061.com-福彩3d购买技巧| www.947989.com-彩票哪个靠谱| www.nc55.com-网易快三app| www.94yp.com-彩礼排行最低| www.4004.tv-澳门彩票官方网| www.55770.cc-网上七乐彩票| www.033196.com-福利彩票3d南方网| www.420116.com-谁有恒大彩票的网站| www.568017.com-福彩藏机图正版更新| www.286197.com-公益彩票软件靠谱么| www.160622.com-福彩3d包好价格表| www.081002.com-天空彩tktkcc| www.151036.com-彩漂液对身体有害吗| www.8488.in-时时彩怎样包码赢钱| www.50684.cc-更好的彩票平台源码| www.425853.com-苹果彩膜效果图| www.530649.cc-重庆时时彩五星技巧| www.an22.com-彩71下载-| www.917632.com-赢彩彩票苹果版| www.120673.com-足彩兑奖时间限制| www.778601.com-双色球彩民天地| www.zv43.com-8彩票app-| www.920926.com-分分快三套路教学| www.974851.com-特区彩票七星彩论| 600万彩票www.449810.com| www.586530.com-糖果派对彩金论坛| www.673037.com-彩票模拟大师下载| www.755675.com-苹果下载不了旺彩| www.839822.com-福彩标语-| www.906884.com-高频彩技巧论坛| www.972736.com-竞彩让球胜平负网| www.gi3.com-彩富网-| www.82he.com-江西体彩有哪些| www.630911.com-海南体育彩票乐吧| www.704848.com-998彩票网站| www.797744.com-九九集团彩票官网| www.pr59.com-快三什么是全骰| www.4mb.com-欧洲彩票大奖排行| www.69ll.com-区块链彩票股| www.2455.vip-竞彩篮球最稳的买法| www.259722.com-彩票选号大师| www.070753.com-购买什么彩票| www.052393.com-彩神靠谱不-| www.849055.com-汪汪时时彩旧| www.981168.cc-福彩快三彩票可信吗| www.662.pw-重庆福彩电话投注| www.977259.com-濮阳清丰彩礼| www.cp0992.com-快三计划软件官网| www.ra51.com-35彩票网-| www.393965.com-彩库宝典生肖资料| www.19831.cc-网络彩票代理合法吗| www.098211.com-3d福利彩票图纸| www.8391.org-网易彩票合不合法| www.593853.com-竞彩即使比分| www.517227.com-老彩民论坛1| www.614520.com-中彩它的读音是什么| www.695014.com-竞彩篮球开奖查询| www.762787.com-分分彩比时时彩坑| www.899099.com-足彩加一球什么意思| www.967745.com-360彩票开奖大全| 乐彩网www.315063.com| www.id53.com-彩神vi-| www.391088.com-天空好彩免费料大全| www.597880.com-体彩19027-| www.682210.com-那个app能买足彩| www.782090.com-彩票和数学-| www.884432.com-五行绝算彩票| 彩民村www.88cmc.com| www.112939.com-七乐彩怎么计算奖金| www.44431.cc-全民彩票平台靠谱吗| www.044828.com-牛彩牛势综合走势图| www.19sl.com-彩铅笔绘画学生用| www.587438.com-贵宾室彩票网址| www.808432.com-美狮彩票吧-| www.911592.com-乐彩神邀请码| 亚洲彩www.68568v.com| www.rs52.com-安徽体彩开奖| www.17gp.com-中国福彩报纸预测| www.268257.com-中国福彩有app| www.255629.com-彩票网名大全| www.775838.com-分分时时彩五星计划| www.878520.com-全民智投彩票骗局| www.958702.com-皇都彩票安卓版下载| 百姓彩票www.bxcp3.com|