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天

知道了
58福彩 www.880071.com-福彩独胆专家预测| www.443778.com-大庄家彩票注册| www.687884.com-巴西快三辅助| www.796534.com-福彩快三的开奖规律| www.884146.com-幸运彩票553平台| www.964189.com-15选5彩乐乐| 大赢家彩票平台www.902271.com| www.lk56.com-彩店宝彩票app| www.44829.com-胆拖投注彩票开奖| www.013813.com-七乐彩杀号天气网| www.250628.com-中彩彩票无法提现| www.561055.com-红彩会登录账号| www.93sc.com-用手机买体育彩票| www.76fp.com-七乐彩中两号有奖吗| www.8596.biz-体彩大乐透最晚购买| www.388009.com-腾讯分分彩后二组选| www.873533.com-网易彩票无法购买| www.960747.com-彩金88元-| 彩61www.642638.com| www.11521.cc-彩票中心客服电话| www.572917.com-彩经众乐三分快3| www.662235.com-中福时时彩计划软件| www.766541.com-竞彩足球直播视频| www.922396.com-国家竞彩培训师考试| www.90rs.com-上海快三彩票| www.648840.com-彩宝的种类-| www.730962.com-彩票一天赚10万| www.x24.blue-彩神il是真的吗| www.2363.shop-体彩排l三迷图| www.112349.com-天天福彩是什么意思| www.755468.com-彩友会官网-| www.540178.com-登陆好运来彩票网| www.671216.com-体彩排列三胆码| www.803595.com-大众彩票app安卓| www.967321.com-专门玩彩票的群| www.kj92.com-呼市福彩-| www.510342.com-500万彩票黑彩| www.610654.com-中国彩吧7-| www.698151.com-嘉兴福彩领奖地址| www.781782.com-分分彩挂机方案吧| www.863760.com-杭州福彩领奖时间| www.939259.com-华夏彩在哪里下载| www.998223.com-福彩快三网平台| www.gn93.com-手机端福彩快3网| www.590048.com-足彩竞彩比分计算器| www.851238.com-体彩单式票开奖公告| www.89770.com-大星七乐彩走势图| www.029377.com-南方双彩网首页| www.26bw.com-福彩八仙过海| www.858400.com-时时彩内部号码曝光| www.cp213.com-幸运快三开奖结果| www.8203.org-重庆老时彩时彩开奖| www.355603.com-彩票智慧门店| www.549771.com-本期七星彩号码| www.782225.com-信誉好的彩票平台| 七天彩www.00665c.com| www.954192.com-重庆时时彩规律漏洞| www.cai2044.com北京快三开奖预测| www.68455.com-博彩乐时时彩平台| www.687603.com-陕西福彩app功能| www.836213.com-腾讯快开彩兼职| www.573935.com-彩之源彩票真假| www.058884.com-彩运快三怎么赚钱| www.743128.com-彩经网官网下载安装| www.835711.com-好彩1开奖玩法| www.899479.com-中国米斗跟单彩票| www.966956.com-点击彩安全吗| www.aw5.cc-快三是真是假| www.pj12.com-新浪竞彩-| www.302.cc-买彩票是怎么赔钱的| www.496308.com-彩票刮刮卡透视眼镜| www.579287.com-趣9购老彩票邀请码| www.651455.com-2628彩票注册| www.717618.com-彩铅画建筑名画| www.788843.com-足彩竞猜手机下载| www.861993.com-福利彩票店转让合肥| www.925575.com-金彩网是真的吗| www.979670.com-计划彩票聊天室| www.ld41.com-大赢家—购彩大厅| www.759962.com-老时时彩计划| www.212537.com-体育彩票加盟| www.8691.pw-丹麦快乐彩人工计划| www.hw04.com-北京福彩中心在哪里| www.6267.vip-彩票3d万能五码| www.93682.com-七乐彩专业版走势图| www.219643.com-彩吧3d图库-| www.62qe.com-网上61彩是真的吗| www.2435.pw-吉林快三日销售额| www.12095.com-新浪彩票3d开奖| www.07074.com-5oo彩票app-| www.21514.com-在哪里举报网络彩票| www.121465.com-和彩票托交往| www.35115.cc-完美彩票-| www.99041.com-公益彩票三d开机号| www.075414.com-瑞祥祥云彩票技巧| 大赢家彩票网www.178775.com| www.29be.com-福建体彩网下载软件| www.258.cm-重庆时时彩合买大厅| www.gy03.com-广发彩票app| www.46134.com-2分时时彩计划软件| www.020637.com-彩票有计算器嘛| www.2969.biz-鸿运彩-| www.771235.com-腾龙时时彩软件安卓| www.438135.com-北京五分彩彩官网| www.696622.com-台湾时时彩走势图| www.946971.com-彩色混凝土制作方法| www.cai1239.com最大的快三投注平台| www.97.win-足彩加官网下载安装| www.946686.com-福彩3d组六走势| 福利彩票www.99677t.com| www.52625.com-七彩神仙鱼-| www.088061.com-上海福利天天彩选4| www.0699.net-易彩堂彩票网址| www.8086.site-彩70彩票下载安装| www.44155.com-彩民彩票无法提现| www.8154.org-高频彩票改20分钟| www.365258.com-香港彩票报刊大全| www.jp62.com-百福彩下载安装| www.x38.org-体育彩票7位数历史| www.8487.org-彩贝捕鱼兑换码| www.245089.com-易彩快3怎么下载| www.370398.com-彩铅画动漫人物简单| www.87721.cc-太阳彩票平台是骗局| www.419983.com-世界杯体彩销售额| www.ov58.com-中国福彩开奖直播| www.0740.me-e球彩中奖助手下载| www.wz47.cc-彩票字谜-| www.026394.com-私彩平台为何不封| www.318653.com-3分时时彩计划在线| www.761316.com-中了彩票去哪里领奖| www.948287.com-多彩网彩票网d55| www.997231.com-快三二不同13| www.cx92.com-搭建私彩票网站| www.tj42.com-玩彩老头3d专栏| www.3591.xyz-头彩官网-| www.126928.com-优彩彩票可靠么| www.223040.com-快三计划群骗局| www.65nw.com-豪彩安卓手机版下载| www.di76.com-安徽体彩票十一选五| www.8312.com-东方彩票是哪里的| www.45299.cc-长春彩益-| www.001975.com-深圳市体彩中心官网| www.100339.com-3d胆码家彩网杀码| www.949248.com-哪个平台可以买快三| www.im10.com-山东省彩票沙龙| www.809872.com-zg中国体彩网| www.890075.com-花生彩票真假| www.953351.com-竟彩直播360| www.cp2859.com-福彩快三的打法| www.001510.com-分分28彩票合法吗| www.677664.com-今晚足彩推荐| www.781556.com-福体彩开奖号码| www.869122.com-七星彩经-| www.955934.com-足彩胜负彩预测分析| www.cp184.com-11选5在线购彩| www.j51.me-118彩票下载安装| www.678081.com-快三最准下期号码| www.66070.com-今天广西快三结果| www.978747.com-加微信群买彩票| www.jw29.com-彩库宝典app| www.83vh.com-智慧彩票软件| www.555236.com-下截全民彩票软件| www.053352.com-快三赔了10万| www.177398.com-幸运快三出号规律|