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天

知道了
彩票123现在叫什么名字 www.019965.com-780彩票-| www.7238.cm-彩虹六号机票多少钱| www.000035.com-彩票616-| www.fg17.com-快三人工计划精准版| www.z33.club-新版广西福彩官网| www.562751.com-久彩彩票骗局| www.646537.com-块3福彩app-| www.740937.com-快三qq群导师| www.881203.com-日彩网平台-| www.966634.com-腾讯五分彩玩法介绍| www.ow8.com-吉林快三合之| www.457531.com-全国彩票2元网首页| www.184318.com-湖北省福彩快3| www.428255.com-金手指足彩缩水公式| www.526581.com-多宝彩票手机版下载| www.602419.com-梦想彩票骗-| www.4856.top-梦见彩票站-| www.24806.com-儿童星空彩铅简笔画| www.72916.com-北京福彩快3销量| www.036685.com-福彩双色球预测汇总| 中原彩票www.302591.com| www.520073.com-福利彩票中两个号码| www.080077.com-中彩网双色球论坛| www.419805.com-印象彩票地址| www.622211.com-五福彩登录-| www.763062.com-阿理彩票登录网址| www.895099.com-时时彩中奖助手下载| 中国福利彩票www.33588j.com| www.189017.com-内蒙古快三中奖金额| www.jo03.com-微信带你玩福彩的人| www.829762.com-连中彩票王-| www.909161.com-七星彩玩发-| www.43jo.com-足彩改期奖金怎么算| www.8610.wang-中彩乐群英会走势图| www.4316.biz-f彩网打单-| www.657157.com-网络彩票公司| www.521206.com-景德镇体彩中心地址| www.602882.com-彩虹六号直播在哪看| www.677873.com-中彩彩吧-| www.765223.com-七星彩够力网| www.842580.com-福彩工作心得体会| www.904940.com-竞彩足球彩票开奖| www.965332.com-爱乐透福彩彩票| www.cp613.com-快三彩票软件大全| www.ni18.cc-极速快彩-| www.o76.net-买彩票怎么看| www.254766.com-好彩投下载-| www.692001.com-有玩快三是真的吗| www.849409.com-时时彩怎么破解| www.940607.com-中国彩票中奖号码| www.320014.com-36o彩票官网| www.4962.com-彩猫彩票个人账户| www.56137.cc-生肖码属于什么彩票| www.025194.com-彩票一份种开账| www.115116.cc-排列三下载彩票| www.206315.com-彩票端是什么意思| www.j16.club-免费申请领取彩金| www.782996.com-福运彩票安徽快三| www.254086.com-c58彩票安卓| www.735654.com-七星彩中奖概率问题| www.970990.com-电影中彩票号码| www.ve21.com-易彩彩民福地注册| www.9636.space-大乐透经彩网走势图| www.113140.com-七乐彩1拖8-| www.381446.com-体彩足彩分析| www.730724.com-彩坛毒药-| www.70177.com-奔驰彩票-| www.2803.cn-足球彩票基础知识| www.672714.com-中彩网开奖公告| www.82em.com-极速赛车彩票是哪的| www.14rh.com-11选5辽宁体彩网| www.974986.com-七乐彩专家杀号大全| www.980135.com-竞彩让球比分直播| www.0413.net-彩乐园网址| www.52991.cc-今天福彩3d太湖图| www.56jt.com-体育彩票投站点附近| www.658536.com-福彩3d开奖app| www.279273.com-微信群彩票骗局揭秘| www.232657.com-上海快三介绍玩法| www.366531.com-湖北彩票22选5| www.460992.com-米兜彩票手机客户端| www.545656.com-如何开个彩票投注站| www.85635.cc-牛彩网3dp3-| www.054595.com-吉林快三规律遗漏| www.cp9628.com-做彩票计划群犯法吗| www.028608.com-百姓彩票网投领导者| www.815083.com-山东体彩手机版官网| 99彩票www.66730.cc| www.9868.cc-三杯体彩福彩| www.658328.com-百宝彩票电视走势图| www.319061.com-爱乐彩北京快三开奖| www.516731.com-饶宜献六爻测彩票| www.98686.cc-竞彩5串5-| www.38971.com-1000万彩票图片| www.048765.com-爱彩乐怎么样| www.230135.com-甘肃省快三出奖结果| www.345721.com-彩神2官网-| www.288855.cc-365全民彩票下载| www.eq17.com-幸运快三代玩工资| www.190619.com-快三有没有规律| 中彩网www.61233s.com| www.363336.com-福利彩票中奖彩民图| www.838405.com-大发快三一天多少期| www.952473.com-大奖网彩票pc| www.473520.com-福彩3d今晚杀码| www.086581.com-福彩自助终端机政策| www.925765.com-彩富网48cfcc| www.zw9.com-体彩6十1-| www.9av.cc-天马彩票是真是假| www.99223.cc-腾讯分分彩中奖秘密| www.132811.com-彩票顶呱刮怎么注册| www.329658.com-正版藏机图福彩3d| www.630405.com-彩票开奖查询排5| www.212227.com-瑞彩祥云邀请码| www.050033.com-彩31彩票网址| www.986139.com-杨震最新足彩推荐| www.362663.com-易赢彩票软件| www.645072.com-酷彩客户端下载| www.925417.com-宏发快三开奖| www.zm77.com-好彩1复式投注表| www.360.xyz-37彩票网站-| www.11519.com-彩乐乐网官网| www.219524.com-快频彩票kpcp| www.393080.com-关于春天的彩铅画| www.687732.com-福利彩票七星彩| www.826989.com-唯彩会专家预测| www.8140.com-福彩每周开奖日期| www.71604.com-福利彩票快三改| www.060182.com-甘肃快三度表| www.191323.com-北京体彩排三| www.336250.com-湖北快三全天多少期| www.654849.com-彩票微信诈骗| www.705057.com-百度3d福利彩票| www.429766.com-靠谱的足彩-| www.339455.com-新疆体彩爱彩乐| www.539050.com-手机快彩网合法吗| www.am94.cc-49彩票app下载| www.jg35.com-一分钟快三开奖| www.50lq.com-彩美旭果最新| www.3314.cc-利用彩票的走势赚钱| www.62tf.com-体彩中心职务| www.825760.com-复式福彩中奖金额表| www.0277.org-时时彩三星推号技巧| www.967726.com-阜阳福彩加盟电话| www.518340.com-女子中彩票-| www.609265.com-优彩交流大厅| www.279078.com-快三机选号码查询| www.936386.com-麒麟彩票app| www.658984.com-彩票七乐彩9个号码| www.957212.com-快三推广的话术| www.5668.gg-大丰彩票网9.9| www.jg23.com-彩票狂人陈栢华| www.979592.com-注册送彩金不限id| www.974329.com-福彩周五开什么奖| www.560581.com-kk彩票网怎么样| www.859208.com-星刚力彩芽-| www.928874.com-公鸡七星彩奖表| www.983914.com-彩99能提现吗| www.ro35.com-盈彩网内部群| www.ln50.com-ok彩票平台-| www.194101.com-福彩10分钟开奖| www.361903.com-福利彩票开奖图片| www.63891.com-体彩足球胜负平规则| www.019368.com-福利彩票双色球字谜|