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.855221.com-体彩主任张弛简历| www.177811.com-五分快三计划| www.184355.com-胜负彩500足彩网| www.129955.com-特区彩票-| www.275362.com-香港体彩走势图| www.21214.com-中国体育彩票竞猜网| www.cp0798.com-中国最大快三网站| www.2639.com-时时彩真的是骗局吗| www.020364.com-掌上彩票苹果版| www.258849.com-足彩比分直播网| www.030010.com-福建快三购买技巧| www.66sq.com-太原福彩店转让| www.77468.cc-彩票自助售票机中奖| www.108676.com-中国彩票应用| www.249566.com-彩票管理条例细则| www.414401.com-外地出彩-| www.586208.com-66微彩是合法的吗| www.772451.com-正彩素颜霜-| www.914366.com-福利彩票预测最准确| www.il30.com-福彩刮刮乐app| www.0365.cm-体彩手机在线坑人| www.52397.cc-英超足彩网-| www.111697.com-澳洲三分彩官网| www.255058.com-51时时彩计划网| www.10ds.com-1分快三是官方彩吗| www.pb41.com-多票票彩-| www.5905.com-定亲礼金和结婚彩礼| www.71922.cc-懂彩帝彩民彩票| www.509262.com-香港旺角彩妹| www.731510.com-d9彩票版平台下载| www.895238.com-联众聚宝彩票| www.f84.pw-查询体彩排列三字迷| www.69xg.com-福彩121期-| www.23dj.cc-稳赢彩票助手软件| www.03746.com-人们该不该买彩票| www.7627.net-新浪爱彩店-| www.61010.cc-福彩1分快3-| www.091464.com-百胜集团彩票| www.199235.com-冮苏快三开奖走| www.381554.com-七星彩号码表| www.748253.com-淘彩吧app-| www.972487.com-游彩网app下载| www.95be.com-18117老牛足彩| www.8690.cc-七乐彩单式开奖时间| www.692902.com-乐乐彩计划-| www.797721.com-彩票vip聊天室| www.887891.com-乐彩不让提现| www.964627.com-搜狐彩票走势图大全| 博创彩票www.558401.com| www.632581.com-天天中彩票系统推荐| www.761946.com-大发时时彩大小计划| www.891383.com-福彩彩票广告词| www.990140.com-发彩票-| www.ll70.com-江苏快三能玩吗| www.0335.xyz-南昌福彩中奖| www.989237.com-福彩快三诈骗手法| www.5019.com-6s彩色钢化膜| www.757911.com-彩35票-| www.868322.com-七星彩第6位振幅| 尊彩www.083016.com| www.75650.com-361理财彩票| www.38182.com-下载手机天天中彩| www.714188.com-三d走势图彩经网| www.897124.com-久久发彩票网| www.172664.com-内蒙古快三开奖结| www.606557.com-彩友会公平公正公开| www.727515.com-福利彩票今天开奖吗| www.850197.com-比特币分分彩怎么玩| www.966971.com-彩手机自动投注器| www.t82.org-彩票谜语藏机图| www.61kd.com-中国福彩3d八卦图| www.13xe.com-福利彩票哪种奖金高| www.90nk.com-优胜客博彩公司| www.040606.com-华夏彩票平台登录| www.268708.com-竞彩猫官网首页| www.373575.com-彩名堂官网网址| www.633046.com-竞彩篮球胜分差玩法| www.731949.com-8k易彩网址-| www.842988.com-竞彩怎么算返还率| www.943737.com-彩99官网下载| www.y35.vip-快乐彩中奖查询| www.91nx.com-凤翔彩票正规吗| www.11752.cc-高频彩接口-| www.850540.com-彩票机选器工具| www.939180.com-金利彩票官网| www.993282.com-网购体彩-| www.ch91.com-极速快三规律技巧| www.sa86.com-怎么看快三跨度| www.07ui.com-彩涂铝卷厂家直销| www.67og.com-体彩五位礼拜几开奖| www.84158.com-西昌拆除彩钢瓦| www.057516.com-彩报蓝精灵-| www.183893.com-河北体彩开奖| www.264265.com-彩票统计学-| www.333776.com-怎样看彩票走势图解| www.404480.com-素描彩铅画小白兔| www.508214.com-彩票一号店软件下载| www.589861.com-六仺彩十二生肖图表| www.660441.com-南国论坛七星彩图| www.733825.com-3d杀和尾凤彩网| www.819663.com-易中彩票平台可靠吗| www.886241.com-vba编写彩票程序| www.958512.com-987彩票官方网站| 幸运彩票www.73166g.com| www.dy54.com-老快三游戏下载| www.290607.com-彩宝软件是骗局吗| www.384869.com-天天彩票靠谱吗| www.508108.com-3d杀号定胆家彩网| www.580201.com-最近的彩票数是多少| www.660058.com-海南七星彩解梦查码| www.734744.com-怎样算福彩公式| www.808537.com-丽彩集团郁鹏简历| www.879581.com-代人人彩票有多少| www.947574.com-职业玩彩经验| 彩票控www.7777ho.com| www.562362.com-mg游戏送彩金38| www.639658.com-奖虫七星彩打印机| www.748161.com-中彩票邀请码| www.829535.com-福彩3dapp预测| www.911810.com-福利彩票快开型彩票| www.974797.com-福利彩票能网上买吗| www.an63.com-贵州福彩中心主任| www.sn16.com-在线下载重庆时时彩| www.53el.com-家家好彩100网| www.0018.loan-彩票的投注方式如下| www.725655.com-彩11app-| www.788962.com-六和彩开奖结果| www.851037.com-时时彩如何科学倍投| www.905485.com-19051期足彩| www.964402.com-人人中彩票快三| 9号彩票www.80767n.com| www.er22.com-乐彩网论坛下载| www.ur44.com-鸿彩快1-| www.18.live-海南七星彩是私彩吗| www.458555.com-跑马彩票网站| www.474602.com-福彩3d九图-| www.355352.com-智博彩票网的网址| www.6119.cm-美国加利福尼亚彩票| www.256731.com-手机中彩网靠谱吗| www.426148.com-职业彩民-| www.575889.com-6288彩票软件| www.727347.com-米兰快彩-| www.863327.com-体彩大乐透16| www.82rb.com-澳门惠民彩-| www.362597.com-广西快三是传销吗| www.720711.com-七星彩中奖格| www.998809.com-香港快三彩票吗| www.248844.com-福彩28下载-| www.693192.com-买彩票有规律可循吗| www.970120.com-乐彩网论坛静态板| www.cp6838.com-安徽时时彩快3投注| www.0911.in-胜负彩合买群| www.864806.com-手机平板彩膜项目| www.359926.com-锋彩直播有手机版吗| www.998323.com-易博彩票安全吗| www.271397.com-好彩蓝莓柠檬双爆| www.29hz.com-澳客彩票大乐透杀号| www.3746.vip-体彩走势图大彩网| www.767520.com-开心彩票网-| www.127583.com-彩虹代刷新版app| www.641482.com-香港蜻蛙彩-| www.760133.com-买彩票提成多少| www.860990.com-香港五分彩开奖结果| www.979427.com-江苏体彩开奖结果|