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.513852.com-噢百万彩票49选7| www.18kr.com-什么的彩云填空| www.96102.com-彩票发行费管理办法| www.933597.com-网络博彩是违法的吗| www.iq10.com-中国体育彩票软件| www.0846.xyz-足彩哪个网站能买| www.060527.com-彩53彩票-| www.856452.com-彩票反水是什么| www.374117.com-广东福彩双色球| www.2494.top-全国彩票计划| www.01065.com-国彩彩票平台免费| www.63568.com-褔彩3d三字决论坛| www.038397.com-彩46网站-| www.131226.com-彩礼五万寓意| www.64pu.com-好123彩票彩娱| www.827009.com-大资本彩票平台下载| www.ke24.com-彩鸿彩票官网| www.94uk.com-体育彩票有几个号码| www.964929.com-114彩票旗舰网| www.677929.com-东方红体彩店下载| www.799700.com-什么彩票注册送20| www.895157.com-七彩格子怎么赚钱| www.984516.com-聚财神ll彩票| www.mx78.com-彩票大数据定律| www.d12.com-推荐的足球彩票| www.99166.com-博彩业务员-| www.976915.com-雷诺好彩一预测| www.uv9.cc-竞彩大奖-| www.tl42.com-体彩试机号关注号| www.570567.com-好彩五分快3| www.513214.com-官方售彩网站| www.574941.com-江苏快三走式一定牛| www.731894.com-彩色压印混凝土路面| www.960322.com-酷彩提现不了| www.cai5211.com甘肃快三推荐号码| www.sl16.com-重庆实时彩骗局| www.5158.top-一福彩开奖-| www.333894.com-彩票3d走势分析| www.441163.com-中国体育彩票杯| www.770321.com-日本软包好彩| www.89lq.com-福彩3d千禧字谜图| www.88051.com-赚钱彩票送彩金| www.112637.com-七乐彩查询-| www.237244.com-免费彩票大全| www.331472.com-大彩网彩票走势图| 盈彩www.yc7701.com| www.735999.com-新彩吧试机号开机号| www.829912.com-618彩票软件| www.023184.com-玩重庆时彩输钱的人| www.445535.com-福彩基诺开奖| www.87uj.com-快开行彩票-| www.642424.com-中彩网全偶统计图| www.583003.com-福利彩票模板| www.53772.cc-秒速时时彩是假的| www.624297.com-乐彩网33-| www.523108.com-500万竞彩-| www.030994.com-被诱骗买彩票亏三万| www.96510.com-台湾彩票大福彩| www.06927.com-福利彩票双色球软件| www.7318.vip-彩虹像-| www.61493.com-福彩三地连线专业版| www.960212.com-超级彩票网站安全吗| www.929933.com-中国福利彩票奖池| www.cp412.com-江苏快三官方平台| www.sk53.com-时时彩专家计划网站| www.087029.com-鸿博彩票计划| www.163826.com-彩票买几注好| www.255273.com-富贵时时彩最快开奖| www.614377.com-五彩缤纷中彩的意思| www.684511.com-五分快三人工计划网| www.008017.com-看更多精彩视频| www.119725.com-发彩平台-| www.200081.cc-七了彩开奖结果查询| www.284100.com-彩票是几位数中奖的| www.796460.com-上海彩票自助售票机| www.873194.com-彩票533-| www.63262.com-中国足彩网亚洲杯| www.089771.com-中福在线时时彩缩水| www.752690.com-福利彩票应用靠谱吗| www.8139.org-查看一下彩票开奖| www.128097.com-手机彩膜图片原图女| www.781421.com-足彩8串28-| www.861565.com-安徽体彩兑奖| www.922337.com-竞彩足彩比分直播| www.977345.com-河南彩礼给多少| www.hj68.cc-快三湖北开奖规则| www.181982.com-大发快三官方网站| www.626575.com-聚鑫娱乐彩票| www.703588.com-今天福彩3d故事迷| www.778737.com-彩票负盈利投注方法| www.845662.com-泰国彩票如何中奖| www.921044.com-彩票查询七星彩开奖| www.972946.com-178彩票网靠谱么| 大赢家彩票平台www.708382.com| www.717362.com-安徽体彩网电话| www.843080.com-慈善与福彩-| www.906627.com-山西体彩快二十分| www.968470.com-福彩便民民-| 汇彩网www.hcw266.com| www.168908.com-中国体育彩票大乐透| www.091201.com-百姓娱乐彩票骗局| www.80kh.com-金誉彩票网封了吗| www.275998.com-湖北快三一定牛形态| www.386303.com-重庆体彩官网平台| www.553915.com-竞彩足球比赛中断| www.212267.com-快三app正规平台| www.828684.com-福彩自助投注机返点| www.557891.com-老时彩开奖结果| www.613344.com-时时彩返奖率| www.669780.com-江苏休彩七位数| www.737620.com-内蒙古快三分析出号| www.801025.com-运发彩票-| www.855952.com-时时彩四定规律| www.950686.com-8亿彩骗局赢了不给| www.cv16.com-彩票店加盟费多少钱| www.984291.com-福彩双色球机选5注| www.8870.xyz-竞彩8串一中奖率| www.0641.in-北京时时彩计划手机| 彩61www.499428.com| www.tc93.cc-春秋彩票有人被骗吗| www.445844.com-买老凤祥彩金可以吗| www.458779.com-五分快三破解| www.693170.com-快三推测专家助手| www.804322.com-彩之网首页手机版| www.699203.com-下载中国体彩票软件| www.841987.com-聚鑫彩票正规吗| www.951625.com-网易体育彩票| www.yb92.com-天津五分彩开奖结果| www.gc31.com-河北11选五爱彩乐| www.5fm.com-杭州大彩网黄了么| www.363345.com-那个软件还能买彩票| www.518358.com-安徽福彩中奖资讯| www.784725.com-福彩双色球是骗局吗| www.872705.com-福彩网站下载| www.936072.com-竞猜足彩规则| www.980464.com-梦想彩票站注册| www.cp620.com-彩票争霸ⅱ-| www.nw72.com-福彩头奖怎么领取| www.08080.cc-体彩竞猜足球结果| www.51593.cc-学生适合买什么彩票| www.59972.cc-足彩8串9什么意思| www.12496.com-吉林快三挂-| www.860292.com-昨天体彩出的什么号| www.444368.com-台湾福彩-| 500万彩票www.39500i.com| www.001803.com-双彩论坛试机号| www.534883.com-彩票小游戏技巧| www.010026.com-彩票频道123| www.22db.com-手机彩票源码| www.571792.com-彩票翻倍稳赢| www.496706.com-13彩是什么-| www.566338.com-4567彩票首页| www.7420.cn-附近竞彩投注站| www.338132.com-牛彩网彩摘网字谜| www.061913.com-彩客彩票提现不了| www.713160.com-香港160彩票| www.821612.com-彩圣字谜3d汇总| www.920013.com-手机智能彩票摇号器| www.993915.com-下载玩彩票-| www.cz55.cc-快三坑爹-| www.199155.cc-福利彩票3d试机号| www.69xj.com-彩票输钱海滨| www.717088.com-十分彩网可靠吗| www.828907.com-投注员打错彩票|