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.820868.com-会理彩钢瓦拆除| www.70sw.com-时时彩杀号定胆| www.885240.com-彩票代打骗局| www.72mw.com-打鱼送彩金可提现| www.598081.com-足彩任九分析| www.692077.com-彩乐网最新软件| www.664181.com-福彩七彩乐中奖奖金| www.876475.com-福彩高人微信| www.fc41.com-今晚七星彩开奖号码| www.254615.com-好彩网有风险吗| www.905185.com-彩乐乐走势图表| www.bo91.com-彩票帮投犯法吗| www.969152.com-天天彩票还可以买吗| www.81qz.com-彩票查询扫一扫| www.609592.com-全彩助手彩票宝| www.932950.com-内蒙快三二同号遗漏| www.840.live-时时彩个位选数| www.934569.com-新5彩票-| 亿彩堂www.87668w.com| www.1770.me-大亨快三算号器| www.726119.com-七乐i彩开将| www.21600.cc-什么的彩-| www.35632.com-快三早上几点开始| www.1941.vip-万彩生活3d预测| www.pk65.com-三分快三开奖结果| www.23nv.cc-七星彩直播现场网站| www.577352.com-网上彩票拿代理加盟| www.302160.com-51中彩提现-| www.380752.com-五年彩票信誉平台| www.493506.com-985彩票平台| www.35lp.com-美国纽约州彩票网站| www.28870.cc-彩票官方网-| www.368501.com-体彩7位19043| www.603502.com-山西省体彩兑奖中心| www.752062.com-福彩3d杀一和值尾| www.108372.com-彩影-| www.403815.com-七乐彩开奖数字规则| www.543661.com-彩吧图谜第三版| www.615431.com-入赘妻主多彩蒲香| www.700733.com-星彩网络科技刷赞| www.789011.com-福利快乐彩胆拖玩法| www.862139.com-体育彩票中了奖号码| www.933245.com-网上博彩是违法的吗| www.984262.com-广州鸣彩科技| www.aw20.com-福彩上海快三走势图| www.58hy.com-爱心彩快三-| www.479306.com-快99彩票-| www.5346.org-18年福彩三地图谜| www.1060.me-彩名堂计划是假的吧| www.407923.com-濮阳市结婚彩礼多少| www.008867.com-qq彩票抓娃娃| www.790040.com-青海省福彩兑奖地址| www.101765.com-今日足彩分析预测| www.258383.com-竞彩足球异常监控| www.425234.com-华益彩票-| www.610902.com-彩38领导者app| www.128921.com-彩票节目-| www.274433.com-腾讯分分彩稳赚公式| www.410228.com-诚信彩票下载| www.633302.com-竞彩蓝球规则| www.815282.com-福彩排七开奖| www.295982.com-福彩三等奖多少钱| www.222149.com-3d彩票买法-| www.565884.com-赌足彩-| www.833633.com-日免无嘴好彩香烟| www.2443.vip-福彩三d开桨结果| www.657430.com-彩票2元网正规吗| www.9797.hk-买高频彩输破产| www.040973.com-二分彩走势图| www.024303.com-3d牛彩网图谜总汇| www.78011.com-福彩3b太湖字谜| www.443918.com-意彩app官方下载| www.040289.com-广东快三开奖网站| www.13378.cc-豪彩vlp6us-| www.9fw.cc-5个数的是什么彩票| www.480.pw-彩票跟投群真的假的| www.24559.com-彩铅风景画简单漂亮| www.5893.biz-湖南结婚彩礼| www.024268.com-福彩了d走势图| www.790697.com-福彩双色球摇号| www.755700.com-好运快三数字| www.772549.com-时时彩走势图彩经| www.895528.com-新加坡快三开奖查询| www.974466.com-福利彩票七星彩规则| www.cai6161.com甘肃快三预测| www.180829.com-手机彩票软件排名| www.203203.com-广西快三号码遗漏| www.848.live-买时时彩违法| www.8636.cc-上海福彩3d开奖| www.65356.com-彩名堂计划怎么看| www.605732.com-吉祥彩05005| www.911132.com-最新福彩3d攻略| www.13no.com-郑州体彩中一山| www.109903.com-14场足彩预测| www.240448.com-四季彩怎么提现不了| www.f51.org-马彩票-| www.420365.com-中博彩票分析网| www.539888.cc-各大彩票期望值| www.800828.com-c9彩九-| www.906050.com-北控国彩科技app| www.973102.com-彩虹六号正版下载| www.hv63.com-五分快三历史开奖| www.172531.com-黑彩票平台快三| www.073060.com-全民赢彩票苹果版| www.195700.com-上海快三一玛渍漏| www.297112.com-中信彩票app| 黄金彩Ⅱwww.hjin6.com| www.118953.com-中国福利彩票预测| www.265268.com-彩票诈骗案怎么判刑| www.369850.com-竞彩提前多久停售| www.3277.pw-重庆分分彩靠谱吗| www.lo2.com-河北福彩3d试机号| www.771197.com-彩虹画儿童画| www.884999.cc-彩摘布衣天下好彩网| www.976519.com-河南体彩中心娄莹莹| www.cx66.com-时时彩哪个网站正规| www.x01.cn-时时彩买个好| 大赢家彩票平台www.082710.com| www.is60.com-周银鹤预测彩票规律| www.5644.org-如何举报网络彩票| www.58683.com-七星彩开奖网易直播| www.024736.com-中国双色球彩票玩法| www.111782.com-彩票送28元体验金| www.190512.com-体彩e球彩开奖号码| www.439006.com-cy888彩网-| www.535384.com-彩票中6位数多少钱| www.602969.com-彩虹六号为啥禁播| www.688186.com-河南福利彩票公众号| www.764442.com-彩吧论坛胆码予测| www.829194.com-害人彩票-| www.900019.cc-河南福彩网首页河| www.801757.com-186彩票-| www.890501.com-71彩票首页| www.969710.com-江苏体彩网彩票| www.gz56.cc-福彩3d预测分析号| www.46866.com-体彩大乐透玩法说明| 500彩票网www.611306.com| www.417566.com-彩票站整体出兑| www.974385.com-彩虹旗泡泡弟论坛| www.90mh.com-香港利记博彩| www.4602.top-彩票要不要守号| www.9278.cc-体育七星彩特区论坛| www.35285.cc-彩票交流群群号| www.76410.com-彩博汇-| www.020576.com-天空彩票正版料| www.6890.biz-香港牛娃彩票资料| www.083920.com-彩70app苹果版| www.5882.vip-体彩排列三可乐预测| www.10123.com-微彩娱乐平台app| www.621298.com-红旗手机彩票| www.700149.com-广西福彩彩官网| www.799592.com-728彩票安卓下载| www.867069.com-彩票星期四开奖| www.947807.com-彩吧论坛首页图迷| www.991667.com-安徽福彩快3官网| www.xq7.com-3d彩吧图库-| www.454594.com-乐8彩快3下邀请码| www.77zt.com-足彩赌比分难吗| www.8965.online九亿彩票计划| www.hd18.com-快乐彩票6348| www.i99.xyz-博彩娱乐免费彩金| www.055265.com-送彩金平台-| www.217015.com-那个地方玩快三的多| www.20ub.com-时时彩接口-|