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.01vc.com-ig新传统彩靠谱吗| www.196.cm-星优时时彩平台登录| www.n87.com-体彩票开奖号码查询| www.429366.com-彩旗怎么做-| www.186387.com-快彩乐-| www.277982.com-啥叫福彩快三| www.355296.com-我要查彩票号| www.437297.com-超级赛车彩票网站| www.853550.com-海南彩票管理中心| www.948365.com-福彩公益广告| 500彩票www.50064w.com| www.870003.com-祝福利彩票快三| www.877707.com-香港1997彩票| www.oq37.com-中彩票zcp-| www.1169.vip-竞彩广告语大全| www.005039.com-今晚查彩票中奖结果| www.975606.com-上官燕最新七星彩| www.ai36.com-昨日彩票号-| www.tf53.com-体育彩票店过户条件| www.4504.top-竞彩自由过关玩法| www.06661.cc-福彩走试图彩宝网| www.316927.com-彩票七七下载手机版| www.107492.com-4月胜负彩赛程| www.9115.cc-七乐彩历史比器| www.325352.com-彩票中奖规则查询| www.857168.com-菲律宾博彩牌照查询| www.16ce.com-幸运彩加拿大28| www.vy37.com-大发快三经验技巧| www.122043.com-瑞彩彩票-| www.395100.com-彩虹代刷授权| www.854683.com-北京时时乐彩| www.562575.com-电子游戏送38彩金| www.257227.com-青海西宁快三app| www.514205.com-黑彩票网站怎么运作| www.161326.com-北京彩票官网开奖网| www.405184.com-彩库资料下载| www.573463.com-258彩票网下载| www.707235.com-彩名堂永久免费| www.805657.com-qq分分彩官网| www.886804.com-c彩61-| www.77669.com-彩尊时时彩登录平台| www.989204.com-彩票大同平台登录| www.73881.cc-欢腾彩票官方网站| www.135389.com-竞彩让球赔率| www.396623.com-星期六有什么彩票| www.506718.com-福彩断组怎么做| www.583097.com-彩票周期趋势分析| www.663823.com-彩票中奖抛妻弃女一| www.739035.com-平刷王彩票计算软件| www.807474.com-陈赫中彩票的电视剧| www.889704.com-凤凰彩票提款时间| www.964952.com-赠送彩票公众号| 易彩网www.12455b.com| www.267934.com-58福彩app-| www.877226.com-七乐彩复式10个号| www.cp496.cc-快三专用app| www.259124.com-福彩快3群真的假的| www.996543.com-黑龙江体彩中心地址| www.429876.com-50o竞彩网-| www.066601.com-彩票10大网站| 金冠彩票www.49956d.com| www.612537.com-快乐十分彩-| www.tg4.cc-福彩开奖公告| www.b89.org-网易彩票开奖查询| www.316271.com-新浪爱彩下载安装| www.ge82.com-快捷彩票app| www.de05.com-秒速快三开奖记录| www.293725.com-易旺彩票购彩大厅| www.361628.com-嘀嘀彩票是正规的吗| www.23ql.com-下彩网怎么进不去皮| www.7193.com-宝乐彩票网-| www.83876.com-文家市镇彩票投注站| www.244569.com-彩票开奖大乐透中奖| www.526928.com-今晚竞彩足球比赛| www.73188.com-好盈彩票聊天室| 大赢家彩票平台www.186379.com| www.87ed.com-福彩一九3d图库| www.47604.com-快三辅助外挂软件| www.71dc.com-今期六开彩跑狗图片| www.54766.com-福彩快三数表| www.644474.com-比特币一分彩计划| www.89241.com-福彩开奖结果23号| www.z24.bid-爱购彩大发快三下载| www.7112.in-福彩双色球专家对比| www.72770.com-天津福彩在哪兑奖| www.111177.com-数字彩票大乐透| www.592517.com-内蒙福彩3d字谜| www.12836.com-足球彩票害人| www.783126.com-转让保定市彩票站| www.018986.com-足彩十一选九的软件| www.dz97.com-彩票赚钱笨方法| www.773001.com-高频彩票北京投注| www.898737.com-一等奖彩票票样| 彩乐乐www.cll168.com| www.oa62.com-百盈快三规则| www.61ox.com-福彩3d走和值号码| www.3526.win-彩八万彩票网站首页| www.932508.com-一网彩票手机版下载| www.708237.com-以买彩票为由被骗| www.857189.com-网络彩票骗局菲律宾| www.979810.com-彩票导航123| www.jj33.com-中国快三第一门户网| www.436667.com-湖南体彩大乐透开奖| www.7625.shop-山西彩民乐图库| www.060549.com-开个体彩店有任务吗| www.003803.com-竟球彩-| www.062652.com-99鸿运购彩票| www.ga07.com-内蒙古福彩快3直播| www.88cf.com-彩民社区心水沦坛| www.6330.vip-三彩服饰公司地址| www.36439.com-澳博彩票合法吗| www.025694.com-体彩一等奖领奖程序| www.978292.com-彩钢围挡板设备厂家| www.rm4.com-河南福利彩网快3| www.87012.cc-超级彩票全球| www.858641.com-体彩历史开奖| www.958829.com-19年福彩初几开售| 9号彩票www.80767z.com| www.303074.com-6000彩票app| www.22010.com-万豪彩票助手在线| www.38265.com-多盈彩手机版| www.81153.cc-体彩手机在线即开彩| www.4bh.com-足彩身价对比| www.732433.com-足球竞彩网官网| www.r27.com-广西福利彩快乐十分| www.54lh.com-c16彩票安卓下载| www.lf16.com-505彩票在哪下| www.37ke.com-福彩双色球售卖时间| www.233390.com-内蒙快三杀号| www.784213.com-心之米商城彩票| 大玩家彩票www.84499j.com| www.910528.com-彩93彩票app| www.983033.com-怎样用手机购买彩票| www.bd58.com-快三安徽开奖走势图| www.ph19.com-足球彩票十四场实弹| www.o98.cn-彩票绝技宝典| www.592078.com-七星彩质合走势图l| www.45138.com-指望中彩票还债| www.750431.com-豪彩平台总代理| www.860433.com-中国福彩快3平台| www.1941.cn-3d今天彩吧图一版| www.519607.com-五福彩票平台有哪些| www.171878.com-上海快三开奖详情| www.250331.com-红彩会app下载| www.365655.cc-鸿乐彩票下载安装| www.135337.com-河南福利快三结果| www.224267.com-彩神ll邀请码| www.003507.com-国彩gc资料-| www.108481.com-彩票倍投团队可信吗| www.528870.com-彩虹天堂吉他谱c调| www.986204.com-竞彩310比分直播| www.265032.com-福彩17500首页| 大赢家彩票平台www.620239.com| www.976.date-买彩票守号会中奖吗| www.737470.com-福彩三d今晚开奖吗| www.810681.com-彩票被店主冒领| www.867125.com-周五是什么彩票开奖| www.923363.com-体彩几点开售| www.966153.com-福利彩票排列五手机| 天天彩票www.54968f.com| www.828.space-双彩网双彩论坛| www.482.mobi-福彩最大奖-| www.3541.net-彩视下载安装到手机| www.11070.com-大彩鲸快乐12|