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.41765.com-福彩三地图谜总汇| www.865028.com-中国福彩手机版| www.995704.com-足彩能买单场吗| www.310486.com-3d彩票个人技巧| www.630621.com-体彩飞鱼复式投注| www.807717.com-七彩app官网| www.ic03.com-3d彩票预测-| www.222014.com-彩票挂机软件哪个好| www.33ky.cc-福彩刮刮乐编码秘籍| www.60925.com-保定福彩管理中心| www.109603.com-上海福彩快三一定牛| www.741618.com-天天彩票苹果系统| www.0646.net-福彩快乐十分任选三| www.040755.com-博彩套利大神| www.4120.cc-彩虹电影台app| www.4426.cn-燕赵福彩走势图| www.694909.com-中体彩走势-| www.682161.com-用微信怎么买彩票| www.209234.com-彩票开奖湖北快三| www.322023.com-看体彩排五开奖号| www.431188.com-竞彩单关结果统计| www.563218.com-优博时时彩平台官网| www.bw38.com-广东天彩查-| www.zz14.cc-体育彩票投注站申请| www.948201.com-贵阳福彩中奖未领取| www.92le.com-导师带领买彩票倍投| www.6150.vip-神圣彩-| www.53128.com-三分彩票如何看走势| www.033667.com-凤凰彩世界正规吗| www.183009.com-安徽快三综合走势图| www.386273.com-体彩hao123-| www.601514.com-银行买彩票-| www.721553.com-七星彩内部精准码| www.875665.com-118彩票是黑网吗| www.ue72.com-78彩票下载-| www.233742.com-北京快三跨度百宝彩| www.365736.cc-兰州彩票店微信| www.089333.com-168彩票苹果下载| www.45072.com-三地中彩网预测| www.15362.cc-福利彩票销售厅工资| www.947461.com-网购福彩-| www.77xy.cc-竞彩足球赌博| www.194344.com-河南福彩幸运二| www.062311.com-159彩票网关停| www.330077.com-国彩吧-| www.641666.com-彩票纸长宽是多大| www.938861.com-8亿彩什么情况| www.2fg.com-干体育彩票挣钱吗| www.481655.com-彩票神奇组合公式| www.237151.com-福建体彩11-| www.373060.com-柬埔寨彩票网| www.577501.com-七星彩能全国兑奖| www.736006.com-中彩票的手纹| www.884433.com-中国彩吧遗漏| www.pv08.com-go彩票是真的吗| www.71ug.com-360福利彩票开奖| 全民汇彩票www.52303h.com| www.jm09.com-大发时时彩qq群| www.0256.net-8k彩票816cc| www.455523.com-极速五分彩是真的吗| www.88dx.com-雅玛彩票网站| www.0476.win-福彩廊坊鸿运预测| www.920167.com-系统彩票网站搭建| www.858667.com-看福彩开奖-| www.926455.com-江西体彩大乐透指导| www.15268.com-嘉兴福彩地址在哪里| www.nz49.com-彩票分析软件下载| www.91lh.com-五分彩投注技巧| www.5856.biz-体彩排三专家推荐号| www.31516.cc-什么是玩彩-| www.821676.com-福彩3d彩圣字谜| www.96401.cc-彩票是事业单位吗| www.133975.com-微信买彩票靠谱吗| www.42bp.com-爱尔兰彩-| www.040468.com-华夏彩票怎么登录| www.184720.com-868彩票登录| www.313210.com-好彩网3d图谜总汇| www.456396.com-红彩影视邀请码| www.590259.com-体彩中奖在哪里兑奖| www.793377.com-体育彩票算赌博么| www.299775.com-下载人人中彩票| www.643607.com-黄河风彩双色球彩票| www.105522.com-彩票助赢计划软件| www.aq06.com-福彩网怎么下载| www.8eu.com-709彩票旧版首页| www.2213.vip-体彩排三断组论坛| www.553728.com-竞彩足比分-| www.579260.com-福建体彩直播开奖| www.161084.com-华宇彩票-| www.213605.com-彩神app靠谱吗| www.059775.com-彩票公益-| www.14332.com-清明节彩票站放假吗| www.76698.com-优彩彩票安全吗| www.041277.com-彩票助手免费手机版| www.497.com-打彩违法吗-| www.533489.com-现在哪个彩票最好| www.012116.com-长沙彩票开奖| www.277991.com-国家福彩中心地址| www.65tf.com-多摩豪全彩漫画大全| www.120608.com-威海体育彩票抽成| www.473098.com-彩乐园彩票网站| www.579225.com-体彩排列五推荐号码| www.662273.com-能用的购彩app| www.864982.com-彩票压大小稳赢公式| www.942941.com-百姓彩票时时彩| www.994900.com-好彩堂四肖中特| www.qk52.com-中原彩票合法吗| www.234905.com-福彩3d和差表| www.98wr.com-彩虹团队微商骗局| www.221663.com-给瑞彩祥云邀请码| www.329752.com-腾讯体育彩票下载| www.886309.com-江苏乐彩站-| www.973134.com-彩虹玫瑰花图片| www.cp5758.com-内蒙快三中奖规则| www.589925.com-海南今天七星彩规律| www.68aa.cc-主播里彩播什么意思| www.2829.win-中彩彩票人人中彩票| www.8572.loan-福彩复式专家| www.42256.com-qq彩钻-| www.95613.cc-体育彩票基金使用| www.045546.com-彩票平台代理佣金表| www.77458.cc-沈阳彩票自助售票机| www.122131.com-希腊十分彩-| www.273744.com-什么是福彩蛋蛋| www.1637.vip-吉林省彩票-| www.306277.com-体育彩票中奖查询| www.86238.cc-丨中国彩吧更懂彩民| www.63616.cc-彩要开奖结果| www.457288.com-恒彩管网-| www.02968.com-体育彩票网站建设| www.610351.com-足彩最简单玩法| www.674696.com-中彩网走式图| www.736922.com-人人赢彩券官网| www.790807.com-好彩三张-| www.856575.com-关于福利彩票| www.901871.com-信誉可靠的足球彩票| www.955942.com-打彩赚钱是什么意思| 网易彩票www.099wy.com| www.fi40.com-大发快三全天计划网| www.e58.shop-北京乐和彩-| www.34oi.com-彩票计划软件定制| www.963474.com-网购足球彩票| www.953261.com-安徽快三查询| www.cg0.com-好彩一生肖走势图| www.1153.vip-两字体育彩票术语| www.785349.com-领航彩下载安装| www.869009.com-七星彩1对数是什么| www.932037.com-犀牛彩票8-| www.990500.com-全球彩app下载| www.gu48.com-附近的福利彩票店| www.b92.cc-河南福彩跑马奖金| www.776001.com-时时彩被骗了21万| www.924924.com-财神彩票网靠谱吗| www.997256.com-哪个软件可以买足彩| www.ey21.com-大发时时彩玩法技巧| www.05vy.com-十大水彩颜料品牌| www.76qo.com-七星彩售票结束时间| www.2413.cm-河北快3派彩网| www.7288.cc-彩虹儿歌简谱| www.975814.com-环彩网appios| www.lh46.com-u9彩票ios下载| www.3im.com-福利彩双色球走势| www.295.live-足彩跟单都是托| www.19912.com-微信买彩票软件|