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天

知道了
彩01彩票 www.869177.com-七星彩晴予专家| www.974273.com-即时开奖的彩票软件| www.cp7736.com-福彩计划群骗局| www.so04.com-五星彩和时时彩区别| www.930508.com-分分彩开奖纪录下载| 500彩票www.50024s.com| www.wi99.cc-重庆时时彩几点截止| www.29tt.com-彩铅画海上日出| www.526.tv-时时彩龙虎和怎么出| www.1894.com-快三的计算公式| www.365739.cc-新手彩铅画教程| www.mq82.com-中彩网3d今日预测| www.77pg.cc-新名彩乃-| www.4475.xyz-七星彩论坛| www.12255.com-今晚海南七星彩开奖| www.90100.com-七彩视界ios| www.053556.com-彩票cp816骗局| www.162469.com-95彩票平台网站| www.254325.com-凤凰网投时时彩| www.326020.com-彩票预测破解app| www.400205.com-在哪里众筹买彩票| www.522220.com-五亿彩靠谱吗| www.600313.com-一次能买多期彩票| www.685383.com-新3d彩票计划全能| www.763198.com-01cp彩票-| www.833897.com-广东福利彩票好彩3| www.901236.com-福彩排五开奖号码| www.966236.com-亿彩网被骗-| www.cp99.com-一定牛彩票网| www.nn28.com-中国足球彩票首页| www.11wx.cc-新粤彩每期报纸| www.302377.com-河南幸运福彩跑马图| www.380220.com-七乐彩号码预测专家| www.668658.com-彩票冷热怎么分析| www.735675.com-体彩和福彩中奖概率| www.816405.com-网络购彩算赌博吗| www.48ql.com-三国杀张星彩| www.1280.top-下载手机彩票软件| www.8085.org-体彩玩法-| www.036121.com-彩票如何网上推销| www.187629.com-不怕挂时时彩方案| www.272014.com-江苏快三人工计划| www.351287.com-竞彩输了好多| www.434729.com-体彩店位置-| www.532122.com-念佛后中彩票25万| www.621173.com-今日彩是什么意思| www.e73.net-七乐彩胆拖-| www.1967.me-巢湖竞彩网点| www.12008.com-购彩软件哪个好| www.57229.cc-彩宝宝合法吗| www.95307.com-七乐彩为什么| www.075611.com-7彩论文网-| www.137933.com-世界彩票最大奖排行| www.224780.com-彩票走势图大全| www.285044.com-花式快三慢动作分解| www.344797.com-彩票联盟是什么| www.011386.com-广东福彩几点开奖| www.056121.com-体育彩票6十1开奬| www.187345.com-时时彩输了追回案例| www.261935.com-体育彩票开奖大乐透| www.342154.com-期期有好彩-| www.414122.com-上海竞彩模型公司| www.107813.com-中华彩票中福快3| www.526636.com-世界第一彩票| www.639344.com-彩票店平均销售额| www.714071.com-体彩竞彩网让分| www.785355.com-七星彩跨度振幅度| www.869013.com-七星彩长条最新| www.53704.cc-美团自助彩票机| www.006825.com-福彩三d字谜图谜| www.799933.cc-福彩3下期-| www.6008.me-中国福彩消宝石玩法| www.ny05.com-大乐透彩票选号神器| www.82zi.com-和彩云是什么业务| www.459299.com-体彩6场容错1场| www.612996.com-赠送彩票充值卡| www.694992.com-怎么下载中彩网购彩| www.801082.com-宁波亿彩购物网店| www.874596.com-杭州福彩中心| www.ot53.com-彩票新规收入下降| www.3ta.cc-中福彩票网址| www.76lo.com-七乐彩几点停| www.1727.cn-彩工网快3贺老师| www.8619.xyz-中乐彩登录网址| www.75qu.cc-体彩排列五和制表| www.7918.cc-香港行政快三app| www.450.in-体彩专家三天计划| www.7276.cm-儿童彩虹绘画图片| www.57837.com-购彩网登录-| www.019664.com-大乐透彩票字谜图迷| www.103417.com-旺彩大乐透软件| www.201827.com-解福彩藏机图| www.285183.com-时时彩是几点开| www.443221.com-家彩网胆码天中图库| www.560823.com-彩易科思-| www.618317.com-熊猫彩票官方| www.678355.com-彩吧伦坛-| www.916030.com-体育彩票店怎么加盟| www.984700.com-炫彩壁纸-| www.nc06.com-彩83-| www.132176.com-起诉离婚退彩礼案例| www.326130.com-c8万彩吧cn六彩| www.521613.com-重庆时时彩5码倍投| www.604865.com-鸿运时时彩计划软件| www.84hu.com-福彩3d大小走势| www.3178.cm-k彩客服-| www.9262.vip-彩宝网彩票-| www.33509.com-环球彩钢夹芯板| www.71634.com-短信验证码送彩金| www.025949.com-a爱彩app-| www.096609.com-南昌福彩兑奖地址| www.163595.com-聚彩彩票正规吗| www.233864.com-手机店买彩票怎么买| www.133462.com-中福快三下载安装| www.wx26.com-新浪竞彩推荐| www.508.site-即时彩是正规彩票| www.01195.cc-体彩店的布置图片| www.60442.com-七乐彩票开奖查询| www.001419.com-快三重一注多少钱| www.831160.com-4月足彩安排| www.919038.com-三分快三大小单双| www.973403.com-彩虹狗cf-| www.cai5177.com5分快三开奖走势图| www.pb05.com-福彩3d预测今天| www.04rs.com-德乙竞彩特点| www.65hb.com-丫头说彩公众号| www.0998.net-福利彩票周即可以买| www.5676.cc-日本彩票怎么兑奖| www.498121.com-鼎彩宝盈-| www.640462.com-新浪爱彩是否合法| www.733111.com-福彩投诉电话| www.797778.com-彩票可以买几期| www.ua29.com-怎样安装人人中彩票| www.8193.org-盈彩吧骗局-| www.35970.com-快乐三彩票-| www.003140.com-幸运彩玩法-| www.114549.com-哪个福彩app好用| www.181971.com-全民中彩票vip| www.251009.com-建行的中彩啦靠谱吗| www.59398.com-彩铅古风人物画| www.4131.biz-三重彩虹-| www.09460.com-彩39app-| www.53967.com-荣鼎彩有谁黑过| www.99587.cc-大连鑫福彩酒店| www.065395.com-莱利彩票app| www.130862.com-立彩极速版app| www.202832.com-怎么看懂彩票走势图| www.276127.com-一注快三中了多少钱| www.346446.com-明彩电影院-| 奔驰彩票www.750966.com| www.727434.com-彩漫福利软件| www.808598.com-e乐彩登录与注册| www.878973.com-河南福彩中心的电话| www.966247.com-亿彩网到底是真是假| 虹彩集团www.hcjt1.com| www.qc8.com-延边体彩中心| www.033807.com-神彩福牛双色球网址| www.179783.com-福彩快三分析| www.245163.com-安徽快三是什么| www.316533.com-体彩大乐透兑奖地点| www.1cz.com-彩票网站制作教程| www.91ex.com-包赔车彩票-| www.3332.vip-彩名堂计划客户端| www.8465.cn-双色球彩之网码|