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.5359.cm-98彩票网手机版| www.692826.com-体彩天齐网字图谜| www.503873.com-彩票平台首充送彩| www.702119.com-体彩足彩竞猜app| www.967514.com-找彩票导师带赚| www.bo76.com-彩民网-| www.85535.com-篮彩大小分算加时吗| www.577720.com-昨晚的福利彩票| www.949052.com-彩票代玩骗局| www.16nq.com-国名彩票-| www.19609.com-体彩36怯7-| www.028782.com-中国彩吧布衣图库| www.341500.cc-3d彩玩法中奖介绍| www.sc35.com-三d福彩千禧开机号| www.2009.cn-送彩金的平台| www.7778.tv-彩网高手论坛| www.822754.com-体育彩票客户端下载| www.69jz.com-彩虹有6种颜色| www.460083.com-扑克彩票机的漏洞| www.590536.com-四川福彩彩票网| www.676946.com-福彩3d小鱼图迷| www.407304.com-七星彩2元走势图表| www.22qp.com-梁宏达彩票-| www.2267.cn-海口彩票网早版正版| www.8800.online福彩双色球开将结果| www.031373.com-迅盈彩票是骗局| www.796504.com-印尼五分彩开奖源| www.908178.com-海南七星彩网大奖网| 彩票驿站www.2350f.com| www.qd54.com-80彩官方下载| www.619189.com-淄博福彩电话号码| www.739064.com-五福彩票靠谱吗| www.839186.com-彩70是否真实| www.936309.com-网易国际彩票| www.ti76.com-中福快三计划网址| www.36ng.com-福彩机选一注号码| 吉利彩票www.80075.com| www.lt31.com-时时彩全天计划一期| www.1415.cc-重庆十字彩开什么| www.947758.com-爱彩乐可以买彩票吗| 8号彩票www.60108g.com| www.322388.com-乘风彩票-| www.060578.com-卖私彩司法解释| www.323817.com-中国福彩双色球走势| www.866268.com-江西体彩在线| www.969142.com-级彩票-| www.df00.com-易彩登陆-| www.3747.org-春节七星彩停盘多久| www.017262.com-福彩3d彩吧图迷一| www.685386.com-彩计划下载福彩3d| www.57.gg-百事彩票网站| www.73398.com-乐彩网首页排三| www.3336.cc-日本全彩本子| www.651566.com-最好的彩票平台是| www.653822.com-皇冠莱利彩票| www.852833.com-体彩选3开奖号码| www.292217.com-体彩直选3开奖| www.376562.com-打了几万彩票人跑了| www.436900.com-福彩3d组选图| www.586867.com-c彩51cc-| www.789672.com-彩票平台源码购买| www.919282.com-时时彩做庄有风险吗| www.993702.com-今日竞彩足球单关| www.ge63.com-彩票双色球开奖结果| www.610054.com-淘宝的彩票-| www.731976.com-易盈彩票客户端下载| www.495780.com-香港利记博彩| www.653675.com-福彩2018035| www.796734.com-体彩任九19039| www.120556.com-彩票开奖3d和值表| www.220566.com-旺彩双色球-| www.79ya.com-彩网500-| www.5104.xyz-打彩票选哪个数字好| www.577181.com-彩票55下载-| www.317347.com-青岛福彩网-| www.069746.com-99彩票总代-| www.6894.vip-富彩8800gts| www.137409.com-87竞彩官方网站| www.224013.com-福彩快三胆码技巧| www.303071.com-400500好堂彩| www.378272.com-幸运彩乐园网址| www.563228.com-优博时时彩平台登录| www.674883.com-彩票哪个单位管| www.792113.com-7彩颜色-| www.71xk.com-彩票走势图如何看| www.280496.com-计划网时时彩全天| www.0523.cn-今晚体彩排列三| www.879964.com-安微快三遗漏| www.999109.cc-e球彩选两场| www.ws32.com-谦喜彩票-| www.37ki.com-够力七星彩表下载| www.14866.com-纵横彩市专家专栏| www.907926.com-合肥市福彩中心电话| www.997873.com-乐彩乐彩网-| www.dc50.com-彩票吃票怎么判| www.v62.com-拉萨体彩中心| www.9774.cc-七星彩上期预测| www.268929.com-5分彩怎么看号码| www.558410.com-福乐彩玩这个安全吗| www.678978.com-彩票101-| www.934409.com-博乐快彩app| www.cp703.com-玩快三哪个平台好| www.we28.com-下载广西福彩网| www.48nx.com-七星彩星彩网| www.6567.xyz-信彩彩票计划| www.843215.com-中国福彩加盟条件| www.912233.com-新彩计划软件| www.970322.com-天天乐彩地址在哪里| 天天中彩票www.969317.com| www.gg44.com-福建11选5慧扑彩| www.027813.com-有人带你投彩| www.433217.com-齐鲁彩票开奖时间表| www.536018.com-彩票四位数字是什么| www.621887.com-宁波一员工中彩票| www.689018.com-晓艳七乐彩推荐| www.756308.com-彩票选号错误| www.825208.com-福彩黄金胆码查询| www.895122.com-正规网投彩票网站| www.985384.com-51计划网时时彩| www.yn7.com-皇都彩票真假问题| www.0dq.com-易盈彩票最新版| www.84ue.com-2016体彩-| www.4590.org-现在彩票还能买吗| www.615408.com-四川福彩开奖信息| www.384368.com-彩票竞猜好运连连| www.521137.com-福彩过年休息几天| www.4309.win-新的双彩论坛| www.70267.com-彩票大乐透游戏规则| 9号彩票www.80767g.com| www.08gs.com-668彩票网骗人| www.063.me-360体彩大乐透| www.53508.com-腾龙时时彩工具| www.298977.com-彩79app-| www.084877.com-彩票机顶盒-| www.2qt.com-体彩投一注是多少钱| www.1936.org-河南福彩app| www.876849.com-六开彩票-| www.941114.com-快乐彩票三登录| www.989450.com-乐彩c1818-| www.nb2.cc-5分快三开奖结果| www.93kj.cc-英国五分彩吧| www.931163.com-体彩七星彩奖金| www.182145.com-皇都彩票一分快三| www.371789.com-体彩天下是合法的吗| www.748186.com-大富豪彩票-| www.940095.com-98彩票登录平台| www.aw34.com-内蒙古快三提前开奖| www.98qw.com-福利彩票中心鲍学全| www.763612.com-皇冠彩票正规么| www.917628.com-彩吧助手专业走势图| www.ko85.com-快三有多少种| www.311446.com-快三分分彩官网| www.807557.com-福彩守号都是傻的| www.934739.com-多彩彩票app| 彩票58www.587991.com| www.cai7399.com湖北快三今天| www.29rv.com-查看明天彩票| www.26ko.com-手机彩店-| www.295234.cc-北京新快三-| www.648777.com-外国彩-| www.867548.com-河南体彩481害人| www.9857.com-159彩票官方版| www.36966.cc-i8彩票官方网站| www.021771.com-彩票易彩网开奖|