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天

知道了
9彩注册 www.43678.cc-旺彩开奖软件| www.qn55.com-什么是江苏快三| www.954195.com-华人官方彩票网| 500彩票网www.918109.com| www.60ti.com-专业玩彩今天预测| www.6988.org-福彩体彩玩法介绍| www.72068.com-快餐彩票-| www.936391.com-福利彩票快三和值图| www.co4.com-上海福彩快三开奖| www.vu01.com-惠民彩票邀请码| www.25568.com-体彩7星开奖| www.039198.com-彩票代投骗局揭秘| www.379773.com-彩票研究过程| www.74211.com-彩票1216app| www.57kk.cc-彩之星站靠谱吗| www.05655.com-义乌中国体育彩票| www.1406.cm-免费双色球彩票软件| www.899431.com-快三晚上几点结束| www.208644.com-彩票长龙最长有多少| www.341858.com-诺亚彩票账号注册| www.453380.com-三d开机号彩吧| www.563097.com-全网合买彩票| www.385929.com-体彩任九开奖时间| www.1402.net-福利彩票有假的| www.7572.win-香港开彩现场直播| www.110696.com-梦解七星彩号码查询| www.635644.com-七彩印象香烟| www.717198.com-彩铅绘画笔触| www.799056.com-福彩能网上购买么| www.020831.com-彩票源码修复| www.119756.com-江苏老快三遗漏| www.123033.com-彩虹计划攻略| www.165255.com-永盛app彩票网址| www.580504.com-彩票疯狂赛车网赌| www.001225.com-神马福利彩票| www.717117.com-安徽体彩网开奖公告| www.918688.com-有想做黑彩代理的吗| www.262105.com-中国体彩网走势图| www.536058.com-福彩十期开奖号| www.719315.com-河北福彩快三彩经| www.18cj.com-打彩金套利-| www.773476.com-彩票稳赚不赔绝招| www.911815.com-快开型彩票-| www.984587.com-彩8网站-| www.il71.com-彩票3d微信讨论群| www.r19.bid-玩私彩-| www.85yp.com-甘肃快三彩控图| www.fn03.com-竞彩足球赛-| www.97py.com-王成周彩票-| www.6868.org-彩运宝清风-| www.959336.com-十分彩票-| 彩天下www.196056.com| www.252876.com-湖北快三历史遗漏| www.390067.com-有人买几万彩票| www.555584.com-四川体彩金7七乐| www.684911.com-500竞彩比分| www.799461.com-逸彩时尚购物网| www.902095.com-彩吧图库总汇| www.968568.com-优乐彩彩票提现不行| www.cai6711.com贵州快三走势图今天| www.rd33.com-北京快三预测软件| www.363903.com-乐猫彩票安全吗| www.94rb.com-开彩365是什么| www.129743.com-最新体彩新闻| www.098949.com-五百竞彩比分| www.r40.org-6开彩开奖结果查询| www.041220.com-秒速高频彩长龙提醒| www.414899.com-足彩n串m怎么算| www.284393.com-江西快三推荐号码| www.57727.cc-合买大厅彩票源码| www.265281.com-福彩3d领袖吧| www.858855.com-刚力彩芽资源是什么| www.930637.com-不交彩票税的国家| 聚福彩票www.50989f.com| www.059671.com-下载appk彩-| www.127440.com-999彩票登录| www.3573.biz-南方双彩下载和安装| www.793376.com-22彩票安全不| www.867761.com-定制彩票软件下载| www.936159.com-够力七星彩梦册网| www.992064.com-时时彩选胆诀窍| www.67.com-e赢彩555-| www.90xw.com-13彩是什么-| www.ml98.com-安徽快三分布走势| www.511067.com-张惠妹彩虹mv| www.684818.com-福彩3d吉祥二宝| www.777496.com-网易彩票我要中彩| www.241998.com-新浪彩票下载| www.66315.cc-彩票赊账怎么解决| www.dx54.com-快三街机游戏| www.6759.com-国外彩票中奖新闻| www.356240.com-腾讯分分分彩助赢| www.110315.com-福利公益彩票全天彩| www.477855.com-佛山福彩2019| www.216903.com-今日彩票开奖| www.381934.com-彩票挂机软件彩仙阁| www.96sh.com-座谈来彩排-| www.640051.com-22彩网-| www.029959.com-大地彩票下载| www.072084.com-手机购买竞彩| www.289237.com-神彩奕奕-| www.0866.cm-江阴优彩不能上市| www.17wx.com-微信有人带着玩彩票| www.ku22.cc-松江体彩中心电话| www.791294.com-上每快三走势图| www.9505.top-中国彩票分类| www.024796.com-七星彩差分如何算| www.266218.com-安微福利彩票双色球| www.9064.loan-七星彩2288-| www.81537.com-河北快三技巧视频| www.041042.com-彩票小程序-| www.21fb.com-山西福利彩票地址| www.66ff.cc-海南七星彩代理待遇| www.219584.com-体彩七位数-| www.28rv.com-tt快三计划-| www.3922.com-3dvip彩票推算| www.482215.com-赚投彩票挂机论坛| www.536884.com-注册送18彩金彩票| 大赢家彩票网www.54400s.com| www.268607.com-c138彩票-| www.384577.com-网上玩时时彩犯法吗| www.835666.com-顺丰丰彩怎么样| www.900993.com-福彩排列3走势图| www.951966.com-彩票123网站平台| www.987819.com-河北快三是真的吗| www.ui.com-手机购彩合法吗| www.mk38.com-北京时时彩停售| www.258613.com-竞彩500投注合买| www.426015.com-福彩3d走势连线| www.522613.com-彩票店微信售卖| www.589132.com-310彩票网-| www.656929.com-福彩几点结束购买| www.713681.com-王者彩票怎么玩| www.789416.com-竞彩篮球资讯| www.847285.com-有哪些足彩推单| www.896729.com-分分彩稳定长期挂机| www.953649.com-香港哪里买彩票| www.995683.com-足彩猜比分技巧| www.dv9.cc-快彩乐-| www.kl10.com-易彩快3怎么下载| www.xa83.com-福彩快3走势图河南| www.712688.com-网赌快三是真假| www.32lf.com-3d字谜彩吧论坛| www.230182.com-3d彩票专家预测| www.271283.com-恐龙快三游戏下载| www.3971.net-复制彩票中奖| www.09893.com-上海福彩选四综合| www.17579.cc-淘宝彩票停售公告| www.33268.cc-哪里可以做彩票网站| www.349549.com-买不了足球彩票了| www.59089.com-彩易双色球综合舨| www.017696.com-彩票投资指南| www.88293.com-正规九彩九票| www.396388.com-竞彩篮球返奖率奇低| www.861587.com-体彩开奖助手| www.369320.com-掌上彩票手机版下载| www.518510.com-类似全民乐的彩票| www.610275.com-使用彩票软件犯法吗| www.698225.com-时时彩遗漏统计软件| www.789754.com-竞彩单关套利| www.875874.com-1516彩票-| www.24iy.com-8p彩膜-| www.296118.com-湖北快三怎么玩最稳| www.38263.cc-多盈彩票线路导航|