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.614660.com-如何买十一选五彩票| www.749933.com-彩牛彩票网-| www.505978.com-彩票杀人-| www.633168.com-篮球彩票规则及玩法| www.9901.pw-2019年竞彩新规| www.668668.cc-彩经网走势图大全搜| www.766597.com-天天彩选4几点开奖| www.863990.com-福彩上午领奖时间点| www.934787.com-体彩高频机顶盒| www.05976.com-779彩票网址| www.509693.com-贵州彩票新闻中奖| www.661539.com-黑彩平台刷流水心得| www.785745.com-领航彩票计划| www.2538.pw-打彩是什么彩票| www.cai554.com-快三怎么代理| www.tk33.cc-内蒙古福彩投注点| www.027723.com-福彩基诺走势图| www.128094.com-彩虹草地图片| www.234790.com-人人中彩网下载安装| www.995144.com-中福快三怎套钱| www.fl48.com-江苏福利彩票网| www.yp83.com-奇妙三数字彩票软件| www.791060.com-彩票在线机选| www.919490.com-彩经网杀号定胆专家| 乐购彩www.lg7717.com| www.f22.hk-航天彩虹军工四证| www.84il.com-浙江彩票有游泳吗| www.22wk.com-166福彩-| www.4984.vip-顶呱刮彩票翻新| www.792167.com-福利彩票43-| www.913786.com-福彩双色球领奖规则| www.981534.com-优博彩票app| www.gm21.cc-国家对彩礼有新政策| www.b10.org-彩虹时时彩计划软件| www.60878.com-新浪福彩走势图表| www.037664.com-彩票中奖计算机| www.154507.com-如何在高频彩里赚钱| www.275191.com-体彩起源-| www.358847.com-娱乐江苏乐彩| www.501128.com-希腊彩开奖时间分别| www.585606.com-财通彩票正规吗| www.663956.com-头彩是正规彩票网吗| www.771734.com-三时时彩人工计划| www.858981.com-彩票开奖查询35期| www.935325.com-凤凰彩票导师群| www.992171.com-福彩彩票代理| www.kh03.com-山东福彩app| www.870082.com-足彩骗局-| www.947219.com-美国加州彩票官网| 火星彩票www.hx6622.com| www.24428.com-玩彩票一次都没中过| www.962353.com-福彩中心fc开机号| www.24469.com-彩铅画古装-| www.6704.cc-12生肖彩票怎么买| www.893222.com-内蒙古彩票app| www.726207.com-彩票端官方-| www.988811.cc-时时彩下载安装苹果| www.st80.com-腾讯时时彩刷大底| www.tn35.com-福彩3d今天第二版| www.42pj.cc-彩票开奖哪个电视台| www.2149.vip-体育彩票足彩百科| www.456084.com-高频彩垃圾-| www.99152.cc-时时彩4星简单玩法| www.396811.com-中彩资料大全| www.638636.com-对比色彩构成图片| www.00gb.com-什么快三提前开奖| www.4066.live-哪里可以买网球彩票| www.35102.com-天下免费彩资料综合| www.739672.com-网上彩票赔20万| www.900032.cc-手机天天彩票软件| www.325692.com-福彩3d缩水软件| www.453284.com-百乐门彩票注册| www.8489.com-万利彩票登陆| www.129927.com-福彩055dcc-| www.pa44.cc-娱乐快三怎么买| www.900959.com-排列5私彩的玩法| www.657306.com-彩票游戏厅-| www.427796.com-足彩14场缩水软件| www.746913.com-时彩6-| www.933703.com-七乐彩13-| www.1863.space-万彩吧玄机解码图| www.059428.com-福利彩票是慈善吗| www.644356.com-体彩中了二等奖| www.qs3.cc-吉林市彩票兑奖地址| www.87py.com-湖北省体彩中心电话| www.050368.com-彩票店做外围| www.237968.com-吉林快三大小规律| www.479858.com-七星彩分几种| www.626890.com-彩票指南正版彩报纸| www.807213.com-竞彩倍投计划表图片| www.970409.com-天天乐彩官方app| www.ht55.com-体育彩票今日开奖| www.908845.com-奥门六星彩-| www.2949.cc-励赢彩票靠谱吗| 大玩家彩票www.9478y.com| www.3244.tv-滴滴彩票下载安装| www.221198.com-uu快三秘籍| www.507798.com-微力彩芽-| www.620440.com-神圣彩票平台怎么样| www.778120.com-今日7乐彩中奖号| www.509915.com-zc444众彩网| www.653861.com-3d福彩大全-| www.338535.com-彩票中奖一亿| www.556074.com-足球体育博彩app| www.773974.com-九宫图算彩票| www.942795.com-彩票保本平刷买法| www.800178.com-福彩网注册-| www.43399.com-民彩网76658| www.164164.com-竞彩4×4-| www.393525.com-今晚彩票开什么| www.88245.com-天天彩票信用卡充值| www.71641.com-就业时报3地天天彩| www.40dp.com-宁波体彩中奖信息| www.716706.com-彩铅可以自学吗| www.621971.com-天天大奖彩票站| www.53191.cc-皇城彩票网官方网站| www.969085.com-刷彩金网站-| www.35du.com-特区彩票长条| www.452380.com-太原开彩票站怎么样| www.640889.com-今天彩民乐树图片| www.416114.com-a彩娱-| www.948203.com-国家福彩网-| www.001928.com-广西快乐双彩玩法| www.095959.com-中国购彩网正规吗| www.386968.com-环彩彩票贴吧| 澳客彩票www.105ak.com| www.06263.com-体彩跨度遗漏| www.aw58.com-上海福彩基诺走势图| www.pa72.com-河北福彩3d规则| www.26hy.com-福彩三的魔鬼图片| www.2646.shop-一分快三怎么才不输| www.532319.com-玩彩吧-| www.345578.com-周易买彩票-| www.358369.com-南京福彩3d中奖| www.39509.com-豪彩网站首页| www.806258.com-彩民村论坛-| www.bf47.com-淘宝彩票app| www.80zw.cc-乐福彩票是黑网站吗| www.cp1200.com-江苏快三计划手机版| www.vl98.com-河北快3彩票空| www.577352.com-网上彩票拿代理加盟| www.659492.com-吉林快三过年停几天| www.770540.com-重庆时时彩几号停售| www.878926.cc-500万彩票过滤器| www.70fg.com-3d彩报第二版| www.2499.pw-上户彩-| www.16268.cc-福彩3d字迷区| www.95573.com-彩票金额分配| www.563745.com-万彩吧玄机解码图| www.642380.com-福彩图片精美| www.778054.com-双色球中奖彩票票面| www.859561.com-福建省福利彩票三d| www.909392.com-今天福彩3d第二版| www.958860.com-查询彩票中奖| www.996479.com-今日三d谜语新彩网| www.kj7.com-快三有多少种玩法| www.mn59.com-彩票快3主页| www.235176.com-足彩胜负14场奖金| www.360483.com-买彩票买什么样的好| www.508830.com-机选七星彩能中奖吗| www.606375.com-雷州七星彩开奖图| www.719098.com-雨后彩虹形成视频| www.919814.com-福彩三d断组预测| www.21dj.com-keystr彩票-|