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.33268.cc-哪里可以做彩票网站| www.57819.cc-中国彩吧网下载安装| www.325144.com-海南福彩大赛| www.524799.com-福彩网邀请码多少| www.772939.com-微信申请彩金| www.165800.com-福利彩票上班怎么样| www.338441.com-中彩网七乐彩预测| www.435886.com-海南七星彩信誉网投| www.555070.com-彩票中亿元彩票| www.559211.com-通辽体育彩票中心| www.160806.com-竟彩258彩票| www.256972.com-微彩吧苹果app| www.067976.com-彩票app制作购买| www.318888.com-抚州体彩中心电话| www.745833.com-大彩网首页走势图| www.2235.net-有山东快三吗| www.2544.cm-彩字在五行中属什么| www.893105.com-彩票大師-| www.981388.com-五分彩是不是骗局| www.1137.cm-竞彩足球赛事取消| www.116647.com-福彩3d最准规律| www.85eq.com-取缔高频彩票| www.3156.win-体育七彩票808版| www.38905.com-一分赛车彩票| www.521242.com-vip时时彩合法吗| www.717022.com-1068彩票代打| www.03xk.com-六仺彩库宝典图| www.4286.com-双彩是真的吗| www.788981.com-胜负彩玩法-| www.901878.com-黑彩怎么套你钱| www.2912.com-腾讯5分彩在哪里| www.20169.com-彩软计划-| www.008142.com-酷彩彩票是假的吗| www.995122.com-福彩主任被抓| www.gt48.com-彩票榜分分快三| www.l68.org-彩票高频走势图软件| www.806727.com-彩票注销是什么意思| www.945485.com-20元体彩刮刮乐7| 彩多多www.78949g.com| www.715956.com-敂力七星彩奖表| www.046055.com-天津福利彩票站转让| www.914511.com-彩神x能赚多少| www.989727.com-正规彩票销售平台| www.cp35.com-如何玩3d福彩| www.c26.club-k彩99线路测速| www.72ow.com-大乐透机选彩票号码| www.89645.com-时时彩两个平台对买| www.809395.com-重庆彩票怎么玩| www.909142.com-星彩医学美容| www.984347.com-小彩牛一用户登录| www.ki8.com-甘肃彩票快3玩法| www.z25.net-爱购彩软件-| www.355898.com-人人乐彩票是什么| www.321730.com-迅盈快三软件下载| www.457317.com-恒彩地址-| www.555601.com-乐彩网最新开奖公告| www.261781.com-赢一彩天下-| www.826821.com-关于京东彩票网| www.894790.com-天天时时彩助手最新| www.966756.com-宝马彩票案焦点访谈| 中华彩票www.914908.com| www.495077.com-收到奇怪博彩的短信| www.595882.com-鑫彩网的玩法| www.03222.cc-台湾彩券-| www.564490.com-福利彩票3d组选图| www.786906.com-彩票三口双彩仑论殒| www.872676.com-福彩迷app贵吗| www.957498.com-连中彩票ios| 大赢家彩票平台www.936271.com| www.313186.com-分分彩定位两期必中| www.380256.com-七乐彩走势图012| www.797158.com-多赢彩票-| www.891339.com-彩神破解版下载| www.958825.com-春节后彩票开始时间| 中国福利彩票www.34788a.com| www.102198.com-趣头条彩票app| www.217892.com-福快彩下载-| www.301368.com-湖北竞彩快三查询| www.vb3.cc-彩票123手机版| www.255227.com-68彩票网站-| www.696210.com-鲤鱼立体彩铅画| www.795199.com-五分彩开奖有规律吗| www.392839.com-长春彩票中奖去哪领| www.518406.com-乐米彩票停售原因| www.584672.com-苏宁彩票平台靠谱吗| www.655888.com-香港星彩买马资料| www.576583.com-福彩快三组合表格| www.758955.com-拉萨福彩快3图分析| www.827689.com-世纪佳缘彩票托| www.892739.com-竞彩足球全包稳赚| www.830915.com-足彩四月份-| www.903251.com-彩票大数据分析系统| www.8898.me-竞彩中奖最高图片| www.052813.com-四场进球彩-| www.177182.com-官网一分快三| www.208121.com-网投彩票首页| www.8478.cc-乐亿彩票可以提现吗| www.27172.cc-快三大小和值计算| www.663050.com-体彩6十-| www.738484.com-三分快三怎么盈利| www.950486.com-网上买福利彩票| 500彩票www.50024u.com| www.3339.mobi-中彩彩票平台网址| www.681717.com-香港5分彩骗局| www.775061.com-购彩助手能不能玩| www.967312.com-百合网玩彩票| 500彩票www.394277.com| www.29290.cc-彩虹瓶颜色搭配图片| www.000119.com-天津新宇彩钢卷价格| www.247633.com-大发快三吧-| www.381812.com-肥城体彩3亿元| www.542811.com-江苏体彩网网| www.760510.com-加拿大五分彩是正规| www.213734.com-贵州快三分布图| www.955733.com-福中彩票怎么样| www.r72.net-高频彩平台出租价格| www.496255.com-国外足彩app| www.588094.com-福彩7乐彩玩法| www.792176.com-浙江省福彩中心主任| www.960704.com-彩票注册送99| 500彩票www.652862.com| www.254638.com-好彩网江苏快三| www.801095.com-福彩频道-| www.910491.com-蓝光乐彩城房价| www.979903.com-广西体彩手机投注| www.cp5337.com-快三开奖结果爱彩乐| www.oi81.com-福彩中奖号码查询| www.17oq.com-张掖市福彩中心| www.8886.in-玩外围足彩赚的比率| www.9192.cm-掌游彩免费下载| www.875619.com-keno快乐彩辅助| www.071014.com-广东彩票365| www.202371.com-福利彩票快乐十分| www.384636.com-288彩票下载| www.43222.cc-韩国有哪些彩票开奖| www.009796.com-新华彩票下载安装| www.ax95.com-七乐彩几个号算中奖| www.uw35.com-大发快三uu快三| www.666650.com-套彩在中国犯法| www.yu27.com-釉上彩有毒吗| www.5228.biz-彩票带赚包赔| www.31870.com-文山彩票店招人| www.61un.com-彩票怎么看中奖号| www.077707.com-甘肃福利彩票种类| www.ym11.com-彩民等待开奖| www.538355.com-中国彩票手机网大全| www.645009.com-118彩票正规吗| www.714783.com-福彩五分彩全天计划| www.781934.com-最把握的黑彩平台| www.835799.com-中彩那天课文分析| www.885371.com-手机玩体彩屋| www.938617.com-988彩票官网| www.977717.cc-世界杯彩票网站| 博友彩www.662182.com| www.561478.com-网络彩票赌博安全吗| www.882569.com-重庆五分彩官方平台| www.967049.com-河北省体育彩票兑奖| www.yx1.cc-彩票技巧顺口溜| www.256862.com-北京快三计划哪里有| www.495280.com-目前福彩最大奖金| www.620369.com-彩色水磨石施工方案| www.759492.com-我想看彩票开奖今天| www.601703.com-80彩票靠谱吗| www.691161.com-福彩排列七综合走势|