QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > swiper产品解决方案列表滚动布局代码

原创商用 swiper产品解决方案列表滚动布局代码

jQuery基于swiper.js制作主机商城产品案例和解决方案列表单排滚动布局,支持默认自动滚动、带左右按钮和索引分页控制效果代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<!--插件基本框架-->
<link rel="stylesheet" type="text/css" href="statics/css/swiper-3.4.2.min.css" />

<!--页面布局样式-->
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="swiper-container-solution">
	<div class="selected-solution">
		<div>
			<div class="swiper-container">
				<div class="layer-title">解决方案</div>
				<div class="solution-cardlist swiper-wrapper">
					<div class="col-sm-4 swiper-slide">
						<div class="solution-card">
							<img src="statics/images/marketplace-selected-solution_0.png" width="100%">
							<h3>智能制造解决方案</h3>
							<p>从研发设计仿真到生产车间现场的全流程数字化、智能化变革,实现敏捷创新、精细化运营。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>

								<dd>云设计</dd>

								<dd>云仿真</dd>

							</dl>
							<span><a  href="#"><span class="arrow-more">了解详情</span><span class="arrow-f"></span></a>
							</a>
							</span>
						</div>
					</div>
					<div class="col-sm-4 swiper-slide">
						<div class="solution-card">
							<img src="statics/images/marketplace-selected-solution_1.png" width="100%">
							<h3>容灾备份解决方案</h3>
							<p>为客户提供容灾备份服务,保障企业关键数据安全可靠和业务连续性。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>

								<dd>企业级数据保护即服务</dd>

								<dd>高可用i2Availability</dd>

								<dd>Veritas</dd>

							</dl>
							<span><a  href="#"><span class="arrow-more">了解详情</span><span class="arrow-f"></span></a>
							</a>
							</span>
						</div>
					</div>
					<div class="col-sm-4 swiper-slide">
						<div class="solution-card">
							<img src="statics/images/zhihuitingche.jpg" width="100%">
							<h3>智慧园区解决方案(智慧停车)</h3>
							<p>聚焦园区智慧停车场景,提供业界优质伙伴能力,打造智慧化停车解决方案能力。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>

								<dd style="width: 100%">智慧交通一体化管理服务平台</dd>
							</dl>
							<span><a  href="#"><span class="arrow-more">了解详情</span><span class="arrow-f"></span></a>
							</span>
						</div>
					</div>
					<div class="col-sm-4 swiper-slide">
						<div class="solution-card">
							<img src="statics/images/shipinjiankong.jpg" width="100%">
							<h3>智慧园区解决方案(视频监控)</h3>
							<p>聚焦园区监控场景,依托云主机EI能力,构建智慧化、场景化视频监控综合解决方案。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>

								<dd>园区企业视频监控</dd>

								<dd>消费者家庭视频监控</dd>

								<dd>雪亮工程视频监控</dd>
							</dl>
							<span><a  href="#"><span class="arrow-more">了解详情</span><span class="arrow-f"></span></a>
							</span>
						</div>
					</div>
					<div class="col-sm-4 swiper-slide">
						<div class="solution-card">
							<img src="statics/images/zhihuijiaoyu.jpg" width="100%">
							<h3>智慧教育解决方案</h3>
							<p>基于云主机提供端到端智慧教育解决方案,涵盖智慧校园、智慧课堂、实训云平台等场景。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>

								<dd>泰克双创实践云平台</dd>
							</dl>
							<span><a  href="#"><span class="arrow-more">了解详情</span><span class="arrow-f"></span></a>
							</span>
						</div>
					</div>
					<div class="col-sm-4 swiper-slide">
						<div class="solution-card">
							<img src="statics/images/marketplace-selected-solution_5.jpg" width="100%">
							<h3>融合媒体解决方案</h3>
							<p>基于云主机服务,面向大传媒行业用户提供“云+网+端”三位一体的一站式融合媒体解决方案。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>

								<dd>智慧媒体云平台</dd>
							</dl>
							<span><a  href="#"><span class="arrow-more">了解详情</span><span class="arrow-f"></span></a>
							</span>
						</div>
					</div>
					<div class="col-sm-4 swiper-slide">
						<div class="solution-card">
							<img src="statics/images/marketplace-selected-solution_7.jpg" width="100%">
							<h3>智慧医疗解决方案(医疗影像云)</h3>
							<p>精准诊治医疗影像云平台,云化放射、超声等医疗业务,实现医生、患者、医疗过程等云上互动。</p>
							<dl class="overflow-hide cf">
								<dt>包含产品</dt>
								<dd>影像数据云服务</dd>

								<dd>临床影像协同</dd>

								<dd>全医技云服务</dd>

								<dd>区域医技协同</dd>
							</dl>
							<span><a  href="#"><span class="arrow-more">了解详情</span><span class="arrow-f"></span></a>
							</span>
						</div>
					</div>
				</div>
				<div class="swiper-pagination solution-pagination"></div>
			</div>
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function() {
		new Swiper(".swiper-container", {
		
			//默认功能属性
			speed: 250,
			slidesPerView: 3,
			spaceBetween: 0,
			slidesPerGroup: 3,
			loop: true,
			autoplay: true,
			
			//分页索引
			pagination: {
				el: ".swiper-pagination",
				clickable: true
			},
			
			//分页按钮
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev"
			}

		});
	})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
百盈PK10 www.713892.com-彩票猜大小怎么玩| www.642519.com-体彩中奖多少要交税| www.2538.cc-饰彩的是怎么解释| www.750895.com-中福彩票登陆| www.849044.com-旺旺时时彩app| www.936935.com-篮球彩票怎么玩法| www.996194.com-澳客网竟彩-| www.zn3.com-福彩快3内蒙开奖| www.sc41.com-重庆时时彩记录查询| www.127032.com-福建快三最大遗漏| www.723952.com-福彩在线有手机版吗| www.908729.com-搜狗彩票走势图大全| www.bo83.com-帮忙投注彩票骗局| www.23bf.com-132彩票应用| www.15362.cc-福利彩票销售厅工资| www.019602.com-湖南体彩赛车官网| www.173553.com-哪里有正规快三平台| www.331087.com-大发彩票怎么样| www.571999.com-海南七彩解梦册| www.75438.com-彩票风云-| www.802035.com-时时彩交流群群号| www.112965.com-福利彩票中奖攻略| www.093325.com-体彩高频彩票| www.15240.cc-比较稳的彩票客户端| www.57zn.com-彩8彩票怎么样| www.006001.com-广西移动手机福彩| www.103766.com-足彩310预测分析| www.435.biz-m5彩票平台-| www.135728.com-彩票中奖的人生活| www.363389.com-抖音名字后面的彩虹| www.598331.com-福彩彩票3口| www.837434.com-立彩邀请码多少| www.3669.biz-彩13专家-| www.018831.com-汇彩网挣钱靠谱吗| www.7033.cc-0707彩票-| www.u33.club-深圳福彩一等奖| www.92ip.com-刷彩金怎么刷的| www.812597.com-最新彩票3d书籍| www.99367.cc-竞彩官网网址| www.355966.cc-彩票小概率玩法| 大赢家彩票网www.178362.com| www.141426.com-2020彩票能信吗| www.374100.com-彩票开奖排三| www.634351.cc-七彩蓝田分红| www.828037.com-春天彩票网站靠谱吗| www.922424.com-足彩高手微信群| www.19gt.com-泰安市体彩-| www.1282.vip-七乐彩机选号码一注| www.444613.com-彩票3b开奖号码| www.714188.com-三d走势图彩经网| www.996358.com-北单竞彩怎么购买| www.1417.net-福彩三地走势| www.306368.com-梦见去彩票店买彩票| www.1574.org-诺亚彩票不能提现| www.bb.com-福利彩票河北快三| www.751698.com-手机打彩票有法律吗| www.206411.com-利盈国际彩票app| www.066242.com-博彩论-| www.234531.com-福彩3d中奖-| www.428258.com-七星彩选码软件| www.523944.com-彩票佣金-| www.869037.com-彩票牛人求职| www.196543.com-新版河北快三百宝彩| www.398811.com-福彩3d高手胆| www.633776.com-怎样选胆腾讯分分彩| www.771538.com-时时彩后一三码算法| www.31ml.com-礼拜六有什么彩票| www.023968.com-买足彩是赌博吗| www.277825.com-中彩网福利彩票| www.404313.com-彩陶王-| www.565769.com-成都体彩兑奖中心| www.731647.com-彩票五等奖-| www.939196.com-金利彩票是否合法| www.hv29.com-内蒙快三杀号| www.16yp.com-如何开好一家彩票店| www.3098.net-今天的彩票开奖日期| www.49481.com-大学生彩票中奖退学| www.057045.com-最新彩票源码| www.323182.com-大玩家彩票登录网站| www.558060.com-复杂彩铅画大全| www.691871.com-大发彩票快三| www.yz78.cc-福彩3d彩报-| www.1339.cc-彩票试机号今天| www.019684.com-分分彩计划稳赢版| www.984174.com-老猫出彩快讯3d| www.82699.cc-足彩第19025期| www.868817.com-七乐彩杀号推荐| www.909678.com-福彩3d技巧大全| www.085066.com-天天赢彩票靠谱吗| www.311733.com-正规合法彩票网站| www.559007.com-11彩票app-| www.56782.cc-火箭彩票安卓ap| www.890905.com-至尊快三是真的吗| www.964352.com-平台网站彩娱平台| www.890174.com-cba竞彩在哪里买| www.9ti.cc-微博彩票没有了| www.261828.com-福彩3d预测胆码| www.98825.com-时时彩怎么个玩法| www.189339.com-彩神8官网app| www.420114.com-cp彩票软件安全吗| www.580230.com-世界杯彩票去哪买的| www.1381.in-幼儿水彩创意画| www.150665.com-大发快三单双计划| www.366363.com-清乾隆古铜彩牺耳尊| www.620431.com-美国加州彩票怎么买| www.964370.com-下载五百万彩票网| www.1ak.com-2345彩票网官网| www.3139.space-福彩和尾振幅| www.015790.com-七星彩在线购买| www.261587.com-广西体彩中心| www.646660.com-足彩到底-| www.cp3325.com-1分快三是官方的吗| www.683733.com-彩票灵异事件| www.0056.cc-时时彩连输模式| www.521858.com-和彩印怎么取消| www.776100.com-彩票跑马幸运彩| www.850417.com-足彩多串过关| www.919073.com-铂金彩3d-| www.982648.com-江苏福利彩票玩法| www.ev30.com-快三看号技巧| www.hi81.com-快三技巧心得| www.785125.com-福利彩票高管贪污| www.6237.cn-最新胜负彩预测分析| www.57527.cc-手机彩票代理怎么做| www.222482.com-彩票注册送28元| www.81323.cc-香港今日彩报| www.99788.cc-彩票平台对刷套利| www.36464.com-牛彩网排三开机号| www.123573.com-体彩在线直播| www.218563.com-快三大小押注倍数| www.97802.com-时时彩后二做号软件| www.132594.com-米彩-| www.00to.com-天上彩虹像什么| www.it75.com-彩票兑奖时间| www.70960.com-彩票白菜分享| www.206404.com-利彩下载安装| www.539447.com-彩票市场现状| www.7628.tv-两分彩开奖号码| www.088093.com-新浪足彩直播吧| www.603603.cc-天子手游彩票app| www.977140.com-订婚彩礼-| www.00gn.cc-百乐彩今晚开奖结果| www.13ze.com-海南飞鱼彩票安全吗| www.38831.com-旺彩专家预测分享| www.858352.com-有完高频彩赢钱的吗| www.954084.com-开奖大厅彩票365| 吉利彩票www.66376h.com| www.92kj.cc-网投彩票哪个网站好| www.5366.vip-淘宝彩票还能买吗| www.368425.com-体彩六加一走势图| www.871996.com-福利彩票双色球74| www.70339.com-神彩v密聊-| www.433449.com-东方彩票注册| www.905810.com-祥云瑞彩图片| www.sm94.com-黑客破解时时彩平台| www.074731.com-香港手机彩富网| www.4164.com-新浪体育彩票网站| www.33689.com-体彩快乐扑克3| www.479077.com-竞彩往期冷门| www.750869.com-买彩票输了300| www.538690.com-威尼斯国际时时彩| www.898831.com-兰州快三彩票开奖| www.sa4.com-看快三跨度技巧| www.mc3.com-凤凰彩票是正规的吗|