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天

知道了
1分快三 www.813130.com-猛虎报彩图每期自动| www.960245.com-淘彩app是骗局吗| www.cp532.com-大发快三提现不了| www.qk82.com-江苏快三人工计划| www.34jv.com-七星彩开奖时间安排| www.707008.com-被骗去买彩票| www.ia16.com-佩奇彩票-| www.9618.in-迷彩色-| www.80229.com-491彩票开奖结果| www.088203.com-北京足彩单场计算器| www.200139.com-胜负彩19050| www.301731.com-福彩3d谜语今天| www.412132.com-苹果手机原彩是什么| www.537055.com-彩票加油微信头像| www.623363.com-幸运3彩票是假的吗| www.718213.com-彩票驿站是什么| www.50218.com-体育彩票送彩金| www.021722.com-福彩20选8陕西| www.139207.com-共享彩票下载| www.308806.com-彩票3b试机号| www.442155.com-双彩求开奖-| www.570067.com-做彩票的领先团队| www.692655.com-湖北快三彩票走势图| www.508140.com-体彩6十丨开奖号| www.671288.com-万彩办公-| www.781194.com-手机上玩彩票怎样赢| www.882745.com-易彩票是骗局吗| www.kq79.com-福彩多久开一次| www.x12.top-有一个彩票软件赚钱| www.65vr.com-怎么劝爸爸不买彩票| www.686061.com-五百彩app-| www.797881.com-快彩娱乐app| www.883581.com-手机彩票投注站下载| www.996982.com-乐盈彩票官网| www.8kz.com-新宝彩票官网登录| www.5773.cc-美狮彩票有几年了| www.16729.com-159彩票网比分| www.61588.com-天天红单彩票官网| www.051325.com-95彩票网官方网站| www.132541.com-加盟彩妆连锁店| www.220444.com-快三秒奶茶加盟电话| www.457228.com-彩票中奖了语录| www.599942.com-福利彩票福字刮刮乐| www.234906.com-福彩3d和值查询表| www.501520.com-彩客网比方直播| www.626736.com-663彩票-| www.710339.com-彩神争下载-| www.797136.com-凤凰快三软件下载| www.907071.com-福彩快三计划网页版| 彩609www.c6096.com| www.ju07.com-怎样才能跳好快三| www.z88.net-彩库宝典开码结果丶| www.69gq.com-福乐彩票骗局揭秘| www.1779.top-福彩3d图谜区| www.12639.com-ig传统彩-| www.62098.com-彩票查询双色球开奖| www.020569.com-甘隶快三开奖| www.102265.com-中国彩票官方版下载| www.180553.com-五分快三是黑彩吗| www.268226.com-668彩票网下载| www.023311.com-六开彩玩法-| www.140250.com-75彩票平台-| www.238009.com-854彩票app-| www.555748.com-08彩票登录-| www.676868.com-彩票万能开挂器| www.782900.com-彩票真实中奖经历| www.858267.com-彩票爆仓-| www.931930.com-体彩门头要求| www.997263.com-易彩堂彩票主页| www.ub8.cc-百宝彩江苏快三| www.sl78.com-体育彩票官网首页| www.591827.com-977彩票官网计划| www.p15.com-彩票振幅走势图| www.97qd.com-中彩票百度贴吧精品| www.5524.vip-多盈彩票秒速赛车| www.32993.com-南京市体育彩票领奖| www.806929.com-浙江福彩销售点申请| www.948940.com-中国体彩购彩| 易彩网www.99638p.com| www.089615.com-竞彩单场开奖| www.211907.com-彩客站是什么| www.310711.com-全能中彩彩票腾讯| www.387521.com-手机膜有彩色| www.562196.com-爱中彩票app苹果| www.636360.com-彩虹棋牌游戏官网| www.715227.com-网上彩票靠谱吗| www.795009.com-福彩3d最新八卦图| www.873974.com-贵阳自助彩票机| www.08bc.com-手绘彩铅插画设计| www.83qm.com-福彩3d表势图| www.2490.pw-今晚福彩三d试机号| www.8247.biz-假的彩票机器哪里买| www.37750.com-如何下载彩虫app| www.81735.com-昨晚福彩开什么奖| www.034508.com-nba彩票真-| www.025480.com-北京快三豹子| www.139689.com-彩38彩票领导者网| www.236296.com-江苏体彩七位预测| www.069823.com-彩票平台彩神| www.188708.com-快三直选中奖多少钱| www.283537.com-福彩双色球几位数| www.404490.com-彩铅画水滴详细教程| www.518600.cc-福彩王素英判多少年| www.582716.com-贷款买彩票怎么制止| www.650571.com-今日头条福彩预测| www.910103.com-棒彩坛万人高手社区| www.969471.com-宝马彩票计划网| www.lb25.com-7彩网下载地址| www.k75.com-天地2分彩走势图| www.47qi.com-南宁市体彩中心地址| www.721.xyz-彩发发软件真的准吗| www.4972.cn-无忧彩票-| www.03012.com-中彩网中奖如何领奖| www.82889.cc-彩票双色球在哪领奖| www.031220.com-芒果彩票是不是骗局| www.107191.com-博彩娱乐导航网址| www.5544.top-正规彩票软件有哪些| www.39111.cc-下载娱乐彩票| www.951486.com-江苏快三改版没人买| 500彩票www.504077.com| www.pq88.com-双彩网论坛官网| www.22fb.com-大发快三专业带回血| www.405.org-彩票五行取数法| www.23651.cc-国家彩票销售新政策| www.94646.com-河南省福利彩票网| www.076945.com-福利彩票都有几种| www.144625.com-全部彩票网网址| www.223600.com-中国人人福利彩票| www.299354.com-彩票每天赚两三千| www.420921.com-爱乐透彩票下载安装| www.542559.com-西宁快三中奖软件| www.748201.com-5分彩输了咋捞| www.818612.com-彩乐汇手机版| www.886321.com-鼎丰彩票一购彩大厅| www.943328.com-福彩快三开奖视频| www.984368.com-广州鸣彩公司口碑| www.ij.cc-江西快三app| www.mu07.com-彩票12下载-| www.13.cm-彩票开彩结果| www.63oq.com-彩票平台搭建教学| www.130379.com-福彩3d大彩网| www.261683.com-北京福彩快3怎么玩| www.ya20.com-梦到彩票号码坚持买| www.52jk.com-利彩有風險嗎| www.586.red-500万竞彩-| www.5788.cc-体彩快乐扑克3规则| www.11483.cc-澳客网十四场胜负彩| www.52941.com-快三杀大赔小| www.95065.com-福利彩票中奖去哪领| www.055762.com-最新彩票中奖生成器| www.526670.com-时时彩追号方法| www.756007.com-中国福彩彩票| www.837636.com-福彩连环夺宝坑人| www.907053.com-彩票坊一分快三| www.973125.com-凤彩网彩票网| 尊彩www.083037.com| www.ev47.com-旺彩网官网下载安装| www.ya87.com-网售彩票2019| www.23sv.com-韩国彩票奖金最高的| www.3968.cm-唯彩看球直播软件| www.9760.online彩票世家3d双胆| www.782862.com-保定福彩征-| www.896040.com-彩票黑客下载软件| www.64640.com-竞彩软件哪个好用|