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天

知道了
金山彩票 www.qg24.com-健康的五快三良好| www.381432.com-大发5分彩开奖| www.503050.com-微信快乐彩是什么| www.581725.com-天天爰彩彩票下载| www.661950.com-竞彩为什么只能串关| www.549.in-香港福彩网-| www.8908.cn-足彩容错表-| www.496491.com-微彩站怎么发起跟单| www.621159.com-聚福彩票成立时间| www.8829.in-南方新彩网-| www.64746.com-竞彩被骗套路| www.854349.com-华夏彩票骗人| www.949072.com-河南481网上购彩| www.lr04.com-旺球彩店安全吗| www.216488.com-乐和彩开奖时间| www.93268.cc-五百竞彩网-| www.1365.cc-彩票有人真的中奖吗| www.1908.net-福利彩票机器人代理| www.523426.com-合乐彩票网址| www.998922.com-头条彩票-| www.46pb.com-老版本印象彩票| www.17321.cc-本周六足彩对阵表| www.680428.com-ok彩票是正规的吗| www.794944.com-重庆时时彩牛牛计划| www.xw71.com-江苏褔利彩双色球| www.099805.com-中华彩票手机版| www.500081.cc-数学彩票体育彩票| www.372601.com-天天爱彩票ios版| www.50cx.com-体彩6十丨-| www.254031.com-时时彩反倍投技巧| www.718509.com-彩虹寓意着什么意思| www.835455.com-春娇与志明好彩烟| www.984585.com-南方双彩双色球定胆| www.l20.net-财神彩票平台正规吗| www.649527.com-博应用彩库宝| www.787917.com-106app彩票-| www.905810.com-祥云瑞彩图片| 乐彩33www.961339.com| www.v23.net-14场胜负彩澳客| www.110838.com-98098彩票网| www.198298.com-七星彩开奖结果直播| www.131931.com-曹县彩礼价格表| www.172276.com-江西多乐彩开奖直播| www.ng15.com-乐优炫彩下载| www.2322.cm-好彩香烟味道怎么样| www.567100.com-彩虹台手机直播在线| www.765528.com-808海口彩票网| www.005327.com-福利彩票几点封盘| www.752285.com-天福彩票平台| www.975305.com-休闲快三套路| www.vh59.com-体彩蓝琪儿断组| www.170181.com-上海快三开奖爱彩乐| www.966913.com-河南快三害死人| www.445607.com-彩票带聊天室| www.119506.com-今晚福彩中奖号码| www.024424.com-国彩彩票网站| www.187599.com-五星彩-| www.757569.com-福建体彩36+选7| www.768769.com-8k彩票网址-| www.7886.vip-澳门好彩运公司简介| www.001320.com-网上购买福建体彩| www.453518.com-多彩娱乐登录平台| www.447733.com-全国彩民网-| www.3156.pw-微信钱包彩票没了| www.91204.com-日景彩烟什么价位| www.177771.com-湖北快三是真的吗| www.291435.com-鸿彩五分快三| 五星彩票www.5xca.com| www.052511.com-花式快三慢动作教学| www.96400.cc-5360彩票网-| www.6qq.cc-促销送彩票-| www.428928.com-十字彩诈骗-| www.745431.com-竞彩购彩大厅| www.845671.com-远洋竞猜彩票骗局| www.ge64.com-湖湖北快三走势图| www.972467.com-优彩网下载安装| www.ft14.com-湖北福彩网官网| www.927114.com-天天彩票如何| www.de9.com-分分时时彩计算公式| www.34cg.com-福彩3d彩报全彩| www.874293.com-2d彩票玩法-| www.369614.com-体彩卩3试机号| 博亿彩票www.636by.com| www.q57.net-湖北快三加奖| www.49mg.com-足彩攻略-| www.8412.cm-福彩吉林快乐3| www.009201.com-福彩3d叶子预测| www.3815.biz-七星彩老鼠精版| www.70638.com-富彩彩票主页| www.099422.com-快三杀号软件下载| www.776111.cc-速彩网诈骗-| www.954619.com-足彩世界杯比赛竞猜| www.cp2825.com-快三手机投注下载| www.50187.com-金鹿彩票快三网| www.3736.cc-号百彩票手机管家| www.12336.com-国际彩票网站| www.72466.cc-大老头彩票-| www.cr66.com-彩票争霸-| www.751625.com-瑞彩祥云作弊器| www.66cq.cc-彩票幽默搞笑图片| www.330721.com-赚钱彩票软件| www.1145.cc-彩票店的广告语| www.cai7766.com快三实时预测软件| www.726774.com-自助彩票机好做吗| www.863760.com-杭州福彩领奖时间| www.975470.com-彩票购买app| www.kg16.com-苹果版彩票软件| www.26lr.com-快三一般计算公式| www.968641.com-重视时时彩微信群| www.qz6.cc-体彩e球彩开奖结果| www.062694.com-时时彩送彩金19| www.562916.com-彩c53彩票-| www.359736.com-85彩票下载安装| www.422600.cc-福彩体彩y销售网点| www.504511.com-彩排是什么-| www.92qu.com-金山谷彩票-| www.77070.com-买彩票十年没中奖| www.607952.com-彩友多平台下载| www.716268.com-湖北百宝彩11选5| www.0468.xyz-彩票比分-| www.149150.com-505彩票套餐| www.14972.com-全民彩票真实吗| www.525992.com-重庆福彩网开奖结果| www.654335.com-东方彩票是正规的吗| www.812577.com-福彩3d大底-| www.891466.com-彩神计划破解版下载| www.986948.com-快三如何作弊| www.jk12.com-大发彩票真的假的| www.059.biz-利彩机械-| www.098922.com-pc28属于彩票吗| www.777327.com-福彩手机客户端购彩| www.838364.com-山东福彩彩友论坛| www.890368.com-手机彩票登录| www.948976.com-gc彩-| www.985612.com-竞彩单场推荐预测| www.cai9456.com七星彩今日开奖号码| www.191254.com-如何研究彩票走势图| www.326923.com-现代古建彩绘图案| www.165991.com-旺彩预测3d4码| www.238457.com-大发快三正规平台| www.390862.com-怎么注册福彩账号| www.516071.com-王成周彩票中奖| www.576175.com-黄岩西城福彩网点| www.635951.com-七彩云烟多少钱一条| www.221647.com-速盈彩-| www.325592.com-福彩3d狂想字谜| www.095340.com-衆彩網-| www.568479.com-重庆时时彩新浪彩票| www.672719.com-怎么推销彩票违法吗| www.717589.com-简单彩铅风景画教程| www.062682.com-大发彩票有哪些平台| www.367676.com-体彩返奖率是多少| www.456865.com-时时彩牛牛玩法漏洞| www.528768.com-画彩虹背影图片大全| www.135134.com-好彩银特醇香烟| www.75dv.com-91竞彩之家关闭| www.0349.biz-什么是彩票跨度| www.3088.la-计划网大发时时彩| www.9635.net-时时彩胆定位开奖| www.113290.com-支付宝里怎样买彩票| www.286190.com-查询体彩开奖号码| www.201718.cc-河北快三每天期数| www.790125.com-彩票预测什么软件好| www.253735.com-福建福彩网七乐彩|