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.814446.com-博彩国际平台手机版| www.126184.com-能抢红包的彩票网| www.217086.com-智博网彩票数字预测| www.298160.com-代玩彩票-| www.378002.com-结婚彩礼全国排行榜| www.519914.com-2343彩票app| www.595448.com-双彩论坛真实谎言| www.667228.com-体彩中奖号码是多少| www.739773.com-3d彩涂今天-| www.811084.com-湖南快三开奖查询| www.891056.com-彩票试玩账号提现| www.959312.com-杏彩168-| E彩堂www.43818m.com| www.gn04.com-彩色包装纸箱厂| www.06047.com-福彩快三杀号| 500彩票www.3126r.com| www.107296.com-o1彩票app下载| www.202123.com-快三缩水软件安卓版| www.998890.cc-美国洛杉矶快三官网| www.3246.net-金鹿彩票-| www.9850.org-太和殿彩画-| www.62018.com-至尊娱乐购彩平台| www.008867.com-qq彩票抓娃娃| www.0247.net-彩票开奖亿元电视| www.656606.com-中彩那天教学视频| www.739623.com-澳彩是澳门盘吗| www.819210.com-彩票计划平刷| www.889594.com-凤凰彩哪里下| www.968742.com-彩票站微信代买彩票| www.cai7999.com幸运快三分析走势图| www.nn01.cc-快三单双最多连几期| www.593401.com-北京七彩集团董事长| www.445117.com-高平彩票站转让信息| www.728698.com-浙江体彩排五走势图| www.cp5.tv-上海快三一定牛预测| www.8244.loan-cc彩票在线网址| www.600455.com-时时彩贴吧-| www.53165.cc-福彩排列五开奖直播| www.656875.com-九彩彩票软件破解网| www.88vj.com-彩票有效期是多久| www.8885.la-足彩中五千万神人| www.61389.com-2018互联网售彩| www.957686.com-七星彩精选一注号码| www.521633.com-时时彩龙虎如何玩| www.745598.com-红彩网官方-| www.606921.com-买彩票的笑话| www.705389.com-彩发发软件免费下载| www.056092.com-分分快三怎么赌| www.218191.com-广西时时彩开奖网站| www.343499.com-大连体育彩票招聘| www.495004.com-ios博彩游戏| www.750479.com-好彩属于正规的| www.887787.com-足彩跟单技巧| www.854003.com-浙江嘉兴福彩官网| www.678854.com-幸运彩金-| www.808988.cc-买彩票的感慨| www.225517.com-彩票托的照片| www.398.hk-惠民彩票安全吗| www.6387.biz-常德福彩中心| www.747401.com-彩票开奖贵州快三| www.731349.com-595hcc易彩-| www.77072.com-彩票霸-| www.022832.com-福彩p3-| www.168998.cc-快三助手app下载| www.111956.com-酷彩吧是不是奖多多| www.495108.com-菲律宾博彩app| www.94364.com-数字彩票体育彩票| www.114613.com-福彩3d最好软件| www.227655.com-快乐投手机购彩软件| www.368927.com-最近彩票中奖| www.542310.com-福彩返点-| www.238062.com-发彩网快三-| www.237061.com-竞彩篮球比分直播播| www.331060.com-棋牌彩票手机版| www.521693.com-崂山区体彩办| www.594034.com-亏损分红的彩票平台| www.761609.com-复式双色球彩票价钱| www.931155.com-色彩风景-| www.mg7.cc-甘肃快三遗漏号码| www.51228.cc-猜单双的彩票叫什么| www.111965.com-马尼拉博彩-| www.202968.com-山东福彩网-| www.347401.com-台湾褔星彩平码资料| www.929023.com-网上福彩骗局| www.991944.com-三分彩如何看规律| www.fd43.com-玩金利彩票被骗| www.709.cm-王者彩票网-| www.189573.com-江苏福利彩票官网| www.498131.com-易网彩票走势图下载| www.360069.com-福彩出什么号码| www.0022.xyz-博金冠彩票安全吗| www.72604.com-彩29网站-| www.453056.com-彩票年销售额| www.745128.com-国民彩票安卓版| www.954030.com-发发彩票网-| www.uy1.cc-彩票123安卓版| www.88156.com-乐彩彩票骗子| www.119735.com-发彩网是正规平台吗| www.3002.wang-福彩3d开笑-| www.882856.com-棒棒彩票计划网| www.678755.com-彩票是国家办的吗| www.830430.com-微信快乐彩二维码| www.951706.com-必赢彩票是真的吗| www.cp9598.com-中彩江苏快三下载| www.33547.com-吉祥彩票官网登录| www.242904.com-彩票大乐透-| www.424163.com-中国星彩3d下载| www.691508.com-中国体彩网四川| www.511499.com-神彩趋势分析系统| www.617229.com-快三豹子通是啥意思| www.711137.com-新彩纺织-| www.789060.com-传统足球胜负彩| www.873983.com-体育彩票查询双色球| www.963873.com-中彩票后的利弊| www.12ru.com-好彩香烟口味| www.318995.com-时时彩快3骗局| www.418338.com-福彩复试7加2| www.535384.com-彩票中6位数多少钱| www.22186.cc-经济频道天天福彩| www.022713.com-重庆彩票-| www.979576.com-送彩金的时时彩平台| www.9496.cc-彩105官网下载| www.53208.com-时时彩的图片| www.26fm.com-彩票站投入多少钱| www.26888.cc-x22彩票-| www.615020.com-来韩国旅游中彩票了| www.102894.com-娱乐k彩-| www.065.site-澳客彩票网开奖大厅| www.829696.com-6合万彩400-| www.725642.com-大发快三一分钟计划| www.852424.com-中福福利彩投| 500彩票www.602472.com| www.mb94.com-24号快三开奖结果| www.64768.com-竞彩害人-| www.061220.com-今天的彩票指南报纸| www.225821.com-时时彩微信qq群| www.375442.com-福彩几个号码算中奖| www.561539.com-彩票双色球网上投注| www.738852.com-福彩3d微信公众号| www.900379.com-粤淘彩票app| www.995055.cc-玩网上彩票合法吗| www.61eg.com-掌游彩台球大师| www.005614.com-河内时时彩全天计划| www.yf47.com-甘肃快三玩法技巧| www.057719.com-玩彩独胆王-| www.iy2.cc-乐彩网3d走势图| www.ue61.com-快三代理软件| www.8811.cn-全天重庆彩龙虎计划| www.yv92.com-福彩3d走开奖结果| www.30qc.com-彩虹世界论坛| www.619970.com-体育彩票邓家| www.677004.com-万彩pdf-| www.737654.com-36体彩开奖结果| www.790258.com-好彩3公式-| www.842284.com-彩票奖金分配比例| www.898373.com-高频彩二十年经验| www.24299.cc-澳洲时时彩后三计划| www.923208.com-体彩扑克3走势图| www.cp2.live-精彩十分玩法奖金表| www.980423.com-彩票彩经网-| www.j78.com-哪种彩票奖金最高| www.09956.com-上海体彩官网电脑版| www.cp249.com-吉林的快三开奖结果| www.585217.com-中国彩色宝石网官网|