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天

知道了
彩01彩票 www.93ci.com-分分彩破解-| www.118873.com-福彩刷人气靠谱吗| www.211066.com-彩票网站平台| www.420661.com-新浪足彩周六擂台| www.887125.com-vr赛车彩票-| 创富彩票www.cf9908.com| www.61302.com-太公鸡七星彩| www.329625.com-速赢彩五分快三| www.59zz.com-体育彩票p3走势| www.3644.cc-七乐彩尾数走势| www.169311.com-快三安徽开奖结果| www.611810.com-新昌县双彩乡双湾村| www.2027.vip-彩虹无人机-| www.06604.cc-天吉网福彩体彩论坛| www.95833.com-中国福利彩票评论| www.097220.com-奥门基金六福彩| www.931743.com-淘宝世界杯彩票投注| www.7424.cc-福彩羽旋公益诗| www.51838.com-牛彩摘采网-| www.038853.com-助赢彩票软件| www.136551.com-6768彩票怎么样| www.252203.com-旺彩预测大乐透| www.377357.cc-qq彩票怎么找不到| www.506481.com-彩天地娱乐破解版| www.586174.com-人人中彩票怎么了| www.986973.com-河北省体彩中心| www.37kx.com-网投彩票大全| www.0952.date-合买时时彩骗局| www.7212.biz-彩票的种类和价格表| www.39792.cc-福网彩app下载| www.019321.com-贵阳市福彩中心主任| www.031037.com-相亲网上彩票托| www.155833.com-快三出豹子的概率| www.133510.com-彩色水泥-| 亿彩彩票www.588yc.com| www.832830.com-网易体彩模拟选号器| www.333336.cc-腾讯分分彩必输| www.232343.com-中彩国际是骗局吗| www.959481.com-彩民堂-| www.1853.top-广西快三提示| www.34of.com-彩票软件开发定制| www.0223.cc-掌上彩票pro安卓| www.186433.com-手机中彩网首页| www.964849.com-福彩海南大公鸡1版| www.gz84.com-彩票666-| www.773421.com-体彩五d排列结果| www.706884.com-福利彩票提款| www.990866.com-旺彩百家149| www.4317.xyz-310版本彩客彩票| www.522898.com-豪彩客户端下载| www.712702.com-大学生玩彩票输钱| www.954031.com-星彩彩票预测推荐| www.ji22.com-发彩网网站多少| www.95ny.com-多彩投贴吧-| www.137561.com-全民乐彩票是骗局吗| www.zz53.com-彩票店布局-| www.881145.com-谁有中华彩票邀请码| www.ap05.com-福彩3d布衣图2| www.160272.com-财神彩票官网| www.365365.cc-极速赛车彩票怎么玩| www.1177.cn-彩票创意广告语| www.08913.com-福利彩票关注公众号| www.79909.com-快三456下面出啥| www.155412.com-彩票游戏怎么玩| www.273973.com-在快三上能赚钱吗| www.957685.com-七星彩票推荐一注| www.cp3319.com-中国福彩一分快三| www.mw20.com-福利彩票七乐彩玩法| www.sc23.com-齐鲁彩票中心| www.628011.com-体彩数字云平台| www.222010.com-特区彩论坛-| www.718277.com-高级彩虹屁范本| www.894787.com-彩票开奖查结果查询| www.360147.com-梦见彩票中奖不给| www.511994.com-购乐彩网站安全吗| www.109567.com-精英彩票心水资料| www.016217.com-彩票快速查询| www.265281.com-福彩3d领袖吧| www.53187.cc-建盏怎么养出七彩光| www.3310.cc-春秋彩票官网登陆| www.zu38.com-建盏七彩效果图| www.087215.com-幸运彩票提现不了| www.948928.com-微博体育彩票| www.9586.biz-局王七星彩极速版| www.864686.com-线上彩票-| www.948179.com-众彩网3d专家汇总| 彩神购彩www.csgc1.com| www.269795.com-百盈彩票是真的吗啊| www.493122.com-彩票公众号吸粉方法| www.954884.com-七彩祥云头像| www.f16.club-中国福彩双色球结果| www.045977.com-发彩网彩票登录| www.40191.com-中国体育彩票自助机| www.017881.com-双色球彩票下载| www.130564.com-彩票中奖图片恶搞| www.653528.com-彩票徐州有多少中奖| www.781472.com-u9彩票怎么样| www.904248.com-快三分解教学口令| www.77769.cc-福彩开奖上期结果| www.51223.cc-凤彩网怎么下载| www.626297.com-彩66官方下载安装| www.963519.com-彩库宝典图库大全| www.cp9269.com-中彩啦下载-| www.544258.com-小小虎3d彩报| www.09788.com-51彩票网站-| www.38654.com-彩运宝ios-| www.85678.com-星彩网靠谱吗| www.098219.com-百度乐彩3d走势图| www.261725.com-3d研彩网-| www.027641.com-易彩网黑我钱| www.437800.com-福彩好做不-| www.656504.com-易购彩网址-| www.245314.com-中国足彩网德甲| www.318594.com-今天福彩三地试机号| www.383949.com-浙江快乐彩快| www.477180.com-福少时时彩缩水| www.cai532.com-快三计划软件安卓版| www.208157.com-港彩三中三论坛| www.337322.com-赌博快三-| www.484042.com-248彩票被骗| www.992304.com-七乐彩拖胆投注表| www.qo79.com-分分彩技巧与公式| www.37.win-彩票心里学-| www.71kv.com-铜陵市体彩中心地址| www.0441.xyz-彩贝壳-| www.4882.cn-足彩外围在哪里买| www.9456.in-国外彩票奖金带回国| www.470822.com-怎样买国外足彩| www.598638.com-七乐彩35期号码| www.675557.com-7意彩注册-| www.739870.com-华彩双色球-| www.807040.com-竞彩2串1计划表| www.886184.com-微信群合买彩票| www.965899.com-买彩票怎么发朋友圈| 大赢家彩票平台www.278206.com| www.cr61.com-河南幸运彩勇士争先| www.868844.com-能买七星彩的软件| www.1374.vip-福利彩票系统案| www.03ag.com-强力巨彩-| www.526557.com-为什么彩票不犯法| www.91987.cc-顺丰丰彩-| www.077033.com-app彩票合法吗| www.177328.com-幸运快三是哪里的| www.305975.com-彩虹六号禁播| www.375041.com-福彩兑奖细则| www.551078.com-足彩合买在哪里买| www.617702.com-燕赵风釆福彩| www.955442.com-彩票改单数据库| www.48ay.com-福彩投注站怎么开| www.521880.com-极速赛车时时彩| www.690022.com-东哥看彩双色球| www.809871.com-zg彩票网最新地址| 中国福利彩票www.34788a.com| www.2641.shop-糖果彩快3平台| www.23936.cc-启航国际网赌彩票| www.fz00.com-举报时时彩在哪举报| www.b22.pw-今天福彩三地试机号| www.89qx.com-篮球竞彩分析经验| www.326982.com-三部门叫停高频彩| www.7482.com-上海开彩票店| www.604973.com-五分彩官网登录| www.410552.com-七彩球怎么拼装| www.310550.com-山东体彩排列三专区| www.378272.com-幸运彩乐园网址|