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.400188.com-福彩3d怪图今天| www.082425.com-正规的国家快三平台| www.821782.com-彩乐乐双色球| www.317085.com-黑龙江时时彩首页| www.187913.com-北京快三走图一定牛| www.296901.com-惠民彩票网-| www.u26.net-天天中彩票软件| www.874613.com-山东福彩网开奖结果| www.965534.com-查一下北京快三| www.c0.org-彩票送彩金38元| www.355.cm-澳洲时时彩是官网吗| www.cp5328.com-北京快三走势图爱彩| www.388282.com-北京华彩集团招聘| www.762562.com-旺旺团队彩票计划| www.837211.com-哪里可以买竞彩足球| www.905552.com-开群买彩票-| www.969002.com-福彩3d胆码定位| www.cp650.com-彩神app2-| www.mj66.cc-分分时时彩是真的吗| www.bw7.com-每十分钟开奖的彩票| www.ph75.com-彩61平台是真的吗| www.z21.cc-十四场足彩分析| www.51yl.cc-彩旗旗杆-| www.766.tv-你玩彩吗什么意思| www.86399.cc-体育博彩软件app| www.cb60.com-天天彩票安卓下载| www.vt67.com-诈骗彩票-| www.26ht.com-发彩可丽丝染膏| www.365983.cc-最顶级的水彩颜料| www.487200.cc-足彩复式转9软件| www.175702.com-吉林快三助手app| www.587660.com-彩排列五开奖| www.662756.com-查询彩票开奖的软件| www.766154.com-大发快三是不是真的| www.855052.com-3d开门彩组选杀号| E彩堂www.43818y.com| www.ui40.com-福利彩票3d怎么玩| www.363917.com-福彩3d9资料| www.477212.com-江西快三哪个平台有| www.679077.com-彩票时间调整| www.796841.com-足彩任9奖金| www.891210.com-最牛福彩店广告语| www.8426.cc-福彩3d24和值| www.41440.com-时彩平台出租价格| www.93138.cc-105彩票.com| www.29nh.com-简单彩铅画女孩| www.175912.com-大发快三网页计划| www.937314.com-云彩在线平台骗局| www.kh08.com-福彩中奖号-| www.08cn.com-go彩是真的吗| www.2712.pw-如何读彩票-| www.920925.com-彩神注册邀请码| www.cai2221.com河北快三推荐号码| www.554491.com-五分快三是什么意思| www.298557.com-时时彩组三组六玩法| www.382567.com-一元起投彩票| www.509407.com-鑫鑫彩网站-| www.612075.com-这期算下期彩票号| www.767275.com-彩票倍投计划表| www.840808.com-彩票领奖期限| www.933168.com-大奖网买彩票可靠吗| www.985245.com-全民福彩真的吗| www.48nc.com-重庆私私彩开奖| www.165227.com-跟群计划买彩票| www.238089.com-发彩网二维码| www.707502.com-南充市福彩管理中心| www.793923.com-福彩不算赌博吗| www.975430.com-彩票福彩3d软件| www.cp182.com-彩票152cc-| www.mw54.com-安徽快三号码分布图| www.1923.me-彩票大奖没人领| www.j57.net-何明今日七乐彩预测| www.87tf.com-黑彩归什么部门管| www.00074.com-彩娃彩票提款| www.287260.com-博发彩票诈骗套路| www.7922.cc-七彩椒种植-| www.945159.com-福建体彩中心搬到哪| www.108492.com-网络彩票输钱怎么办| www.80008.cc-彩票领先团队骗局| www.48jx.com-七星彩单双图| www.1027.com-万彩吧3d开奖结果| www.7369.vip-七星彩画规律| www.157208.com-91彩票联盟官网| www.927306.com-褔彩3d藏机诗| www.981868.com-大运彩票平台网址| www.735281.com-浙江福彩专业版| www.838315.com-专业玩彩双色球| www.644266.com-足彩19019任九| www.256523.com-官方彩app-| www.491407.com-009彩票销售中心| www.rd.com-吉林市福彩网| www.ym19.com-手机上快三怎么回事| www.430551.com-南京丰彩-| www.67lq.com-陈官体育彩票位置| www.7353.cm-彩虹6号账号| www.7112.xyz-好彩客599-| www.934711.com-快彩下载链接| 新盈彩www.xinyc2.com| www.331195.com-彩神网兼职靠谱吗| www.092566.com-河南农村彩礼多少钱| www.84mp.com-聚彩票官网首页| www.652929.com-足球胜负彩任九开奖| www.866086.com-5星彩app-| www.977923.com-快三能赚钱-| www.jw53.com-彩神大发快3助手| www.0004.cn-彩票有重复的数字吗| www.34949.com-澳门意大利彩金项链| www.311136.com-体彩走势图表| www.33wz.com-七星彩长局表| www.18148.cc-竞彩足球比分3串一| www.027400.com-093彩票合法吗| www.101449.com-乐彩33app-| www.180903.com-中彩app123-| www.558370.com-彩铅画图片大全动物| www.777853.com-易购时时彩登录平台| www.862791.com-百度体彩开奖| www.c38.top-北京5分彩从哪出的| www.340010.com-能买时时彩的软件| www.763725.com-神计划人工时时彩| www.89xd.com-网彩被骗300万| www.764170.com-顶呱刮彩票图片| www.935852.com-彩票长龙助手下载| www.zd28.com-3号彩票网址| www.965203.com-大发快三有没有规律| www.7711.cm-湖北彩前三值| www.04940.com-广州好彩酒家电话| www.279773.com-优乐时时彩-| www.2692.cn-如意彩票开奖| www.062019.com-彩客网ios客户端| www.22342.com-女方要20万彩礼| www.86321.cc-三彩实体店-| 彩69www.096610.com| www.11kl.com-网上购彩软件那个好| www.2199.top-福彩3d南方断组| www.01490.com-斗牛送彩金-| www.637254.com-彩虹电视台在线直播| www.uh86.com-彩吧app-| www.399558.com-彩票注册网站| www.552146.com-快3走势图爱乐彩| www.25bk.com-彩票每天几点停售| www.5261.pw-体彩7星彩最高奖金| www.980371.com-下载山东十一选体彩| www.vu.com-快三是什么赌博游戏| www.895938.com-大发快三软件公司| www.869791.com-3d福彩唯彩会| www.097315.com-福彩3的胆码| www.967669.com-彩票带单计划群| www.ff01.com-彩票平台注册送23| www.887639.com-最靠谱的彩票平台| www.691935.com-移动积分怎么买彩票| www.803282.com-彩票返奖率-| www.882606.com-易彩网彩票违法吗| www.953275.com-竞彩网篮球开奖结果| www.cp408.com-分分快三有亏钱的吗| www.60156.com-彩票怎么交税的| www.y44.net-财神⑥和彩-| www.93634.com-彩泥相框画-| www.15.me-中国副利彩票官网| www.511.pw-大发快三交流群| www.3186.biz-体育彩票送8克金条| www.75723.cc-老猫出彩快讯| www.798662.com-极速时时彩1码计划| www.856627.com-想开一个彩票站| www.899960.com-天天彩app-|