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.6698.in-彩票开奖查询全部| www.9104.top-乐彩直播网-| www.92669.cc-立彩首页app| www.579447.com-体彩今天的开奖号码| www.jq86.com-大发快三倍投合理| www.927647.com-世界杯彩票在体彩买| www.zb38.com-五福彩票网站五福彩| www.5185.win-天津市福彩快乐十| www.0632.win-中彩网七乐彩玩法| www.433994.com-福彩怎么买稳赚不赔| www.zt38.com-体育彩票奖金规则| www.663.red-体彩天下江苏快3| www.84ha.com-福彩12选5软件| www.87yu.com-黑彩女业务员| www.119549.com-快三个位计算公式| www.425541.com-彩票赢家报纸电子版| www.576101.com-牛蛙彩票36码网站| www.720033.com-买七星彩的诀窍| www.860746.com-快三2同号-| www.971334.com-体彩大乐透头奖概率| www.ax48.com-体彩基诺-| www.de35.com-彩票号码共有几位数| www.577418.com-体彩安徽-| www.770208.com-彩神ll登入-| www.898793.com-体育彩票网点查询| www.234619.com-彩票o2o平台| www.28995.cc-3d百度贴吧彩票吧| www.fp85.com-福彩网平台是真的吗| www.688816.com-彩神iv软件下载| www.ko2.cc-快三吉林技巧| www.478827.com-竞彩奖金优化计算器| www.595344.com-2019双彩论坛| www.679708.com-中华彩吧-| www.764693.com-七星彩早版神算子板| 大奖彩票www.11djcp.com| www.63358.com-福彩3d之家首页| www.521428.com-南昌市体育彩票网站| www.627692.com-休彩票排五开奖直播| www.732158.com-彩礼一般多少钱| www.878585.com-下载内蒙福彩大家乐| www.978640.com-c彩61软件-| www.ua3.cc-时时彩游戏机| www.369341.com-家彩搜索3d开机号| www.552729.com-快三银行卡怎么解绑| www.653710.com-彩友吧原创预测总汇| www.729984.com-快三安徽开奖查询| www.812834.com-七乐彩跨度走势| www.cj56.com-福利彩平台是什么| www.12561.com-体育彩票买几个号码| www.578782.com-体彩形象店面装修| www.s47.cc-最新免费白菜彩金| www.87ne.com-天猫彩票游戏| www.250062.com-甘肃快三推号技巧| www.319559.com-爱彩乐是正规彩站吗| www.446227.com-98彩票网app| www.25764.com-仟喜彩票是骗人的吗| www.85101.com-这附近哪有彩票店| www.102519.com-马来3分彩-| www.66439.com-彩票网上可以兑奖吗| www.067733.com-彩票5首页-| www.e05.com-彩票计划软件ios| www.666241.com-航天彩虹调研| www.759880.com-云彩彩票是什么| www.10yz.com-隔热彩钢瓦价格| www.3487.cc-福彩还能买吗| www.34542.com-彩吧论坛试机号| www.383212.com-彩票从哪里买正规| www.974702.com-四川省体彩中心官网| www.qh37.com-好彩蓝莓双爆价格| www.26en.com-七彩葫芦-| www.748884.com-旺彩预测双色球预测| www.870265.com-刚力彩芽和杨丞琳| www.143518.com-好彩0567平台吧| www.223545.com-足球彩票网-| www.90fh.com-官方博彩免费网| www.211403.com-吉林快三追号计划| www.110035.com-一分快三预测器| www.s00.in-广西快三诀窍| www.4183.cn-乐彩城app-| www.188906.com-彩票大赢家邀请码| www.296823.com-快三都有哪些玩法| www.500544.com-金帝彩票正规吗| www.073615.com-八方彩票-| www.55ii.cc-金利彩票手机版下载| www.64yf.com-体彩七星彩直播| www.cai689.com-必中快三计划免费版| www.975648.com-彩礼一般是怎么谈的| www.488160.com-和乐彩票安全吗| www.592395.com-七星彩最新规律表| www.688608.com-短信买彩票-| www.791042.com-注册送彩金的博彩| www.894141.com-冠军集团彩票app| www.982509.com-万达时时彩平台注册| www.in43.com-澳客网足彩14场| www.101454.com-红彩app安全吗| www.129670.com-海南彩钢板-| www.1996.me-678df彩票网| www.8041.xyz-87彩店客服电话| www.33401.com-海南竞彩快3查询| www.990735.com-彩票平台刷钱漏洞| www.223111.cc-福彩3d跨度走势| www.372342.com-安徽3注彩票中奖| www.789429.com-米竞彩-| www.3201.vip-下载网易天天爱彩票| www.328908.com-澳门电子游艺送彩金| www.93634.com-彩泥相框画-| www.2110.top-66彩票网-| www.rc85.com-甘肃快三玩法规则| www.5fb.cc-五分彩规律-| www.088261.com-福利彩票自助投注机| www.178722.com-江苏体彩e球彩| www.260192.com-十分快三走势图开奖| www.043600.com-彩票刷分红靠谱吗| www.593208.com-彩虹六号标准版| www.704954.com-众乐彩-| www.803808.com-海南体彩软件| www.893234.com-彩名堂计划好用不| www.950703.com-如何在微信上买彩票| 9号彩票www.75679.com| www.778708.com-8号彩票幸运飞艇| www.8705.shop-彩票中奖海南| www.07966.cc-高频彩长龙统计网| www.6491.cm-福利彩票客服电话| www.21499.cc-七天彩苹果版| www.986437.com-彩票c53cc-| www.45749.com-体育彩票平台哪个好| www.96829.cc-福彩无法网上购买| www.086943.com-k彩民福地登录下载| www.78382.cc-彩票万能三码| www.020403.com-彩38彩票官网| www.2117.wang-江苏体彩在线app| www.9881.loan-高频彩有多少输多少| www.575445.com-福利时时彩票| www.894507.com-福彩快3投注方法| www.975273.com-彩票群名称大全霸气| www.b15.online-周一什么彩票开奖| www.3513.org-福彩3d个位九宫图| www.50223.com-玩彩网苹果版下载| www.813165.com-彩友会官方下载| www.180606.com-02彩票app-| www.557536.com-中双色球彩票大奖| www.647090.com-足彩14场缩水| www.1038.org-玩五分彩有什么技巧| www.826018.com-彩宝贝3d杀号| www.910579.com-乐彩app哪里下载| www.558084.com-大家赢彩票骗局| www.671198.com-彩票新规影响生活| www.761473.com-好彩妹扮演-| www.po92.com-随机选号福利彩票| www.948135.com-神彩福牛双色球网站| www.989254.com-杭州福彩店怎么申请| www.be8.cc-北京福彩快三走勢圖| www.pl32.com-体彩北京11选五| www.x13.club-8848彩票真的吗| www.40da.com-订婚彩礼钱属于谁的| www.200182.com-双色球数字新浪彩票| www.275882.com-时时彩倍投资金分配| www.74kv.com-好彩堂一肖两码赌经| www.631222.com-博彩软件刷流水| www.089259.com-北京快彩开奖结果| www.0md.com-天天竟彩-| www.125871.com-全民娱乐彩票app| www.cai0722.com快三网上投注平台| www.607210.com-彩播直播平台网站|