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.289816.com-澳客彩票苹果版| www.418184.com-盛大彩票是什么| www.402898.com-聚鑫彩票骗人| www.531907.com-奔驰彩票客户端下载| www.000475.com-竞猜体育彩票开始| www.298058.com-人人彩骗局揭秘| www.389184.com-福利彩票怎么算钱的| www.539438.com-彩创天地手工陶艺| www.651783.com-彩票黑科技软件下载| www.00670.com-彩票双色球万彩吧| www.185007.com-快三哪个app安全| www.962745.com-今日3d彩圣字谜| www.je1.com-智慧彩app-| www.tl57.com-彩票网站送彩金| www.760482.com-三彩女装怎么样| www.885567.com-安徽快三全-| www.961652.com-体彩天下名钻刮刮乐| 吉彩www.806375.com| www.954604.com-掌上中彩是正规的吗| www.164885.com-海口彩票网经典彩| www.284987.com-开福彩好还是体彩好| www.391176.com-491天空彩-| www.522252.com-微信代购彩票违法吗| www.612544.com-体育彩票世界杯倍率| www.740202.com-牛彩网开机号对应码| www.092.date-2118官方彩票| www.25414.com-彩虹周杰伦下载| www.700989.com-快三假彩票诈骗案例| www.151058.com-77彩票提现不到账| www.286632.com-福彩3d彩涂第一版| www.373065.com-彩38网址提不了现| www.139011.com-同城体育彩票网| www.256155.com-彩播下载苹果版| www.447882.com-七星彩说彩-| www.568722.com-彩票中奖的书| www.664386.com-官方网上售彩| www.734900.com-五百万彩票网投注| www.802652.com-北京福彩兑奖大厅| www.673977.com-福彩区域联网| www.809868.com-众乐彩app下载| www.303105.com-彩票app出租| www.510436.com-彩虹的约定儿歌简谱| www.214546.com-311亿彩票-| www.360808.com-彩票计划导师套路| www.1xx.com-怎样最容易中彩票| www.63rm.com-怎么制作彩票程序| www.338269.com-桐梓彩民中奖| www.864945.com-下彩网官方下载| www.927269.com-3d福利彩票中两位| www.980000.cc-送彩票活动案例| www.kp9.cc-彩票开奖大全| www.1109.vip-网彩计划员-| www.014469.com-彩票王成周现状| www.655739.com-生日彩票生成器| www.778331.com-360彩票预测网| www.952502.com-快彩是什么意思| www.gp2.cc-彩3彩票官网首页| www.842360.com-体彩公益金贡献| www.82el.com-中国新彩吧网开机号| www.39661.com-每天中彩-| www.505450.com-黑彩代理怎么赚钱| www.cai9393.com彩票123彩票网| www.f85.com-彩票代理骗局| www.310653.com-官方彩网址-| www.306696.com-彩票机选能中奖么| www.380240.com-网上竞彩足球在哪买| www.761782.com-买竞彩-| www.939532.com-现在有哪些彩票平台| www.927906.com-福彩奥运3d图迷| www.cai5355.com江苏快三技巧| www.51xn.com-德州好彩-| www.926882.cc-趣彩彩票-| www.762032.com-彩色复印机租赁费| www.881647.com-网易彩票走势图表| www.972880.com-uu直播快三网址| www.48dk.com-三国杀张星彩技能| www.50vd.com-如何下载双色球彩票| www.500233.cc-送彩票的文案| www.086303.com-足彩姜山冷门博客| www.26oi.com-领航彩票是真是假| www.531065.com-18号体彩开奖号码| www.716925.com-简单彩铅画儿童| www.307710.com-派彩网快3-| www.92790.com-网上黑彩票违法判刑| www.as26.com-彩票走势规律讲解| www.810129.com-手机贴彩膜多少钱| www.vl96.com-网上怎样买彩票| www.981355.com-苹果7钢化膜彩膜| www.888897.com-怎么推广彩站宝| www.966827.com-宝马彩票老宝马登录| www.cp1120.com-快三免费计划网页| www.28923.com-彩票号码可以控制| www.kn16.com-重庆竞彩快三| www.929094.com-盈彩在线app下载| www.20848.com-彩状元彩票是骗局吗| www.77977.cc-91竞彩之家-| www.025508.com-网上彩票代理| www.550649.com-沈丘县彩票中奖| www.675916.com-中福彩3d-| www.789102.com-广西快三有没有假| www.902253.com-怎么举报彩票站| www.pb06.com-河南快三奖金| www.r60.org-福利彩票中奖图| www.618526.com-体彩杀号定胆预测| www.713958.com-旭彩彩票在线平台| www.424129.com-附近有福利彩票站吗| www.367711.com-古风画手绘彩铅| www.31ap.com-安徽快3彩票网| www.113111.com-七乐彩奖金规则| www.196644.com-彩票开奖结果查询奖| www.281362.com-江苏e球彩总进球数| www.357778.com-彩票a8骗局-| www.8730.biz-彩票新玩法11选5| www.60554.com-51彩虹登-| www.075292.com-开彩门-| www.533956.com-七星彩技巧与规律| www.46jn.com-开家彩票店赚钱吗| www.298760.com-幸运3玩法彩票| www.405896.com-七星彩资料群| www.146433.com-竞彩篮球比分赛果| www.254051.com-快三3个6豹子规律| www.3006.pw-六禾彩开奖现场报码| www.66237.com-时时彩大平台| www.030971.com-大马彩票是合法的吗| www.449229.com-豪彩彩票公告| www.5636.xyz-竞彩跟单平台有哪些| www.573512.com-22彩票去哪里下载| www.667581.com-彩球碰撞游戏| www.751438.com-中国3d中彩网| www.813854.com-金豪棋牌彩票| www.873670.com-掌上彩票app下载| www.942561.com-网易买体育彩票安全| 中彩网www.81233c.com| www.gj55.com-广西快三今天遗漏表| www.fi44.cc-彩票注册领取| www.584432.com-中3彩票平台| www.ov62.com-彩票信息开奖结果| www.91bk.com-海南体彩缩水软件| www.7677.pw-彩票上的字母| www.90330.com-买彩票机选容易中| www.357337.com-中彩票后离婚| www.4188.cm-七彩网络查分| www.979184.com-福福彩3d-| www.an91.com-江西快三怎么开奖| www.338797.com-i8彩票官方网址| www.999667.com-蓟彩芝演的电视剧| www.mn41.com-正彩-| www.21wl.com-彩票王的故事| www.0463.cc-竞彩足彩彩票| www.6818.wang-福利彩票3月21日| www.8926.wang-做时时彩代理犯法吗| www.63381.cc-订婚要给彩礼吗| www.058377.com-彩界联盟app| www.933939.com-彩票托的经历| 幸运彩票网www.33598l.com| www.11680.com-乐彩票app下载| www.787565.com-360足球竟彩| www.848541.com-时时彩官网公告| www.916800.com-彩铅画星空图片| www.976224.com-36800彩礼寓意| 幸运彩票www.926799.com| www.960950.com-七天彩邀请码注册| 天天彩票www.1035c.com| www.zg6.cc-江苏老快三开奖走势|