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.90813.com-8亿彩苹果-| www.122860.com-酷彩吧app安全吗| www.wm62.com-微商中彩彩票| www.456403.com-彩易达出租-| www.596668.com-极速飞车彩票公式| www.128063.com-捷豹专业彩票平台| www.298.xyz-七星彩怎么守号| www.4587.net-现在什么彩票可以买| www.9969.me-国家彩票官方网购买| www.132456.com-河南两万彩礼| www.09my.com-旺旺彩票二维码扫描| www.283050.com-7星彩玩法介绍图片| www.380805.com-pk10套利彩金| PK彩票www.8499q.com| www.305976.com-今天时时彩开奖号码| www.455583.com-区块链彩票平台| www.555099.com-华彩人生1点通下载| www.an79.com-福彩助手吧-| www.p23.com-微博彩票游戏| www.95aq.com-投彩据点-| www.0198.cm-国彩彩票骗局| www.855.pw-时时彩五星最稳| www.069564.com-福彩3d跨度| www.359.red-彩票997-| www.602535.com-558彩-| www.702909.com-彩客竞彩-| www.803389.com-v9彩票平台-| www.898521.com-彩票扫一扫在哪里| www.974999.cc-055zcc福彩网| www.dp0.com-快三中2个号有奖吗| www.oi79.com-青海时时彩走势图| www.tr03.com-福彩扫码摇大奖| www.33ml.com-体彩销售点几点停售| 网易彩票www.560691.com| www.o78.com-送彩票的寓意| www.180282.com-重庆快三查询| www.77517.cc-赢彩网骗局-| www.072602.com-香港四亿彩票| www.673720.com-159彩票官方版| www.cp6695.com-搜索新快三开奖结果| www.805327.com-华达竞彩旗舰店| www.397513.com-体彩大乐透截止时间| www.645996.com-竞彩高手经验谈| www.773615.com-福利彩票有几种| www.882080.com-网上做兼职玩彩票| www.977568.com-彩票截止时间是几点| www.bv18.com-浙江快乐彩票开奖| www.18qz.com-杨光华足彩-| www.5346.org-18年福彩三地图谜| www.26154.cc-天彩计划app下载| www.606119.com-去年七星彩开奖号码| www.057268.com-福彩3d预测总汇测| www.716141.com-唯美古风人物彩铅画| www.821540.com-佩奇彩票登录| www.738992.com-福彩跟体彩哪个更假| www.563078.com-网易幸运站彩票彩票| www.1gm.com-网络彩票靠谱的| www.378126.com-结婚彩礼20万| www.591386.com-澳门彩票官网| www.202852.com-彩票平台刷流水| www.283267.com-彩票店有哪些玩法| www.552970.com-一次可以买几注彩票| www.779576.com-天空彩票与大同行| www.859358.com-体彩开机号家彩网| www.916592.com-竞彩足球彩票世界杯| www.976295.com-吕梁十三县彩礼| www.cai3452.com时时彩投注网| www.jv58.com-下载2元彩票软件| www.zz81.com-新浪爱彩投注网| www.370666.com-四季彩平台用户登录| www.509054.com-万利彩票软件| www.363065.com-雨后彩虹是什么原理| www.11399.com-足球彩票结果| www.as15.com-彩票走势的研究方法| www.405551.com-体彩排列三句话| www.551226.com-中国福利彩票体彩| www.256852.com-官方彩票软件有哪些| www.332961.com-彩票分析app排名| www.530911.com-极彩登陆网页| www.673488.com-古建筑旋子彩绘图案| www.321836.com-福体彩历史开奖查询| www.951988.com-彩票全天计划网站| www.cp2035.com-幸运快三网-| www.29989.com-体彩排列五在线投注| www.991445.com-海南七星彩图规| www.mc11.com-彩投彩票app下载| www.p17.cc-福彩怎么玩详细介绍| www.440449.com-大乐透彩票购买时间| www.81955.com-中发彩票是黑平台吗| www.215759.com-大发快三稳赚技巧| www.927376.com-福利彩票三d是机号| 多乐彩票www.422626.com| www.mw09.com-人人中彩票登录不了| www.08859.com-福彩3d玩法有假吗| www.591227.com-澳门买彩票网站| www.190512.com-体彩e球彩开奖号码| www.886062.com-五洲彩票平台| www.12ue.com-各省快三开奖时间| www.2930.pw-甘肃体彩玩法| www.31166.cc-久久彩票有人赢吗| www.237412.com-内蒙快三查期号| www.033895.com-竞彩篮球大小分技巧| www.586555.cc-2019棋牌送彩金| www.fx27.com-3d彩民群微信群号| www.806966.com-竞彩足球跟单计划| www.167266.com-北京快三官网| www.ja5.com-内苎快三-| www.204515.com-江西快3彩票| www.677156.com-网上的推测彩票准吗| www.862163.com-福彩跑马幸运彩下载| www.u97.top-得彩票大奖后的生活| www.3045.org-江苏省体彩7位数| www.828135.com-有充值红包彩票网站| www.102339.com-彩神app是坑嘛| www.234414.com-黑龙江福彩22选5| www.508344.com-澳门好运彩-| www.657244.com-福彩3d打票机界面| www.930231.com-网购彩票江苏快三| www.cp3559.com-河南快三遗漏查询表| www.62oi.com-怎么能网上买彩票| www.939513.com-彩吧彩票注册| www.345444.cc-万博可以买时时彩吗| www.466464.com-2628国际版彩票| www.566101.com-七星彩投注软件下载| www.648271.com-霍金彩票公式| www.871594.com-牛蛙彩资料大全| www.92799.com-易悠710彩票| www.093639.com-高频快开彩票停止| www.797881.com-快彩娱乐app| www.hc66.com-福利彩票提成| www.1470.xyz-彩博888平台怎样| www.19895.cc-趣客站彩票app| www.95967.cc-fbi足彩技术| www.sb.cc-福利彩票天天快3| www.553777.com-足球竞彩延期怎么算| www.893715.com-彩票c99-| www.409533.com-吉利彩票平台网址| www.526668.com-彩票店做私庄判几年| www.618088.com-彩票真的中不了| www.725389.com-如何投诉彩票外围| www.791882.com-网易竞彩足球不能买| www.866890.com-竞彩篮球彩票app| www.913197.com-彩经网3d振幅| www.967174.com-7星彩多少天内兑奖| 豪彩VIPwww.381860.com| www.fu65.com-彩票计划是骗局吗| www.509337.com-快开彩票开奖随机| www.583795.com-中彩股份宁夏快三| www.657193.com-辛运彩app-| www.770066.com-博彩广告站-| www.965514.com-31号快三开奖号| www.cp0358.com-上海快三跨度图| www.212207.com-淘宝彩票-| www.56155.cc-彩票快3的规律| www.950396.com-中国福利彩票怎么买| www.997553.com-乐都彩票app登录| www.xg5.com-内蒙古快三平台| www.3915.win-梦见抓鱼七星彩码| www.4861.cn-女性梦见买彩票| www.855983.com-新加坡快三走势图| www.950680.com-八亿彩平台是真的吗| www.20404.com-福彩网赚-| www.013951.com-快三玩法表格| www.087209.com-cp710彩票真假|