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.339193.com-史上最高彩票| www.551775.com-周一彩票-| www.650737.com-彩之云客服电话| www.770415.com-彩杠麻将-| www.885894.com-福彩分析-| www.968461.com-福彩鲍学全-| www.nn1.com-福彩快三真的假的| www.yp30.com-68彩票网官方网| www.32az.com-竞彩篮球返奖率奇低| www.1264.vip-乐彩010102-| www.04798.com-分分彩平台哪个好| www.71804.com-彩票天天彩选四开奖| www.052151.com-六和彩开奖| www.150512.com-快三二不同号奖金| www.278646.com-一分快三怎样抓豹子| www.389887.com-彩票过期了-| www.539050.com-手机快彩网合法吗| www.668885.com-六彩宝典-| www.778070.com-彩票喜乐彩-| www.880788.com-淘宝让买彩票了吗| www.969744.com-网上购彩平台有吗| www.db33.com-足彩分析师团队招聘| www.zk41.com-彩票助手-| www.48vx.com-现在彩票时间开奖| www.1315.me-体彩大乐透中奖新闻| www.23781.cc-彩票走势分析软件| www.77357.com-好彩客软件-| www.051424.com-快三高频彩害死人| www.396472.com-87彩票金钱豹| www.593875.com-七彩app真的假的| www.705276.com-帝皇彩票-| www.800037.cc-体彩和福彩开奖结果| www.926328.com-七乐彩除7余数| www.995540.com-易彩彩票是违法的么| www.lr41.com-旺彩双色球2018| www.u33.link-出澳门博彩那个网站| www.80ef.com-西宁市福彩中心| www.3238.org-彩票999apk| www.26783.cc-彩票几点买号| www.79136.com-线上体彩安全吗| www.087031.com-鸿博彩票安卓下载| www.175762.com-北京快三中奖助手| www.351051.com-干体育彩票挣钱吗| www.456926.com-福彩结束时间| www.562301.com-爱中彩票客服微信| www.695522.com-竞彩足球合买| www.797018.com-福利彩票多久过期| www.910996.com-福彩时时彩选号软件| www.999831.com-好彩预测技巧| www.dc21.com-湖北快三全天计划| www.e12.com-竞彩中奖多久能兑奖| www.45ha.com-厦门彩票站转让信息| www.2088.vip-图拉斯手机彩膜| www.9961.loan-多彩时时彩d55| www.80005.com-吉林福彩快三走试图| www.042014.com-彩票店荧光板宣传语| www.167991.com-河南快三推荐号| www.268323.com-快彩助手是什么情况| www.368958.com-福利彩票摇奖机原理| www.498327.com-汇佰彩票是骗局揭秘| www.594132.com-七彩时时彩-| www.699000.cc-彩铅画入门教程书| www.787933.cc-体育彩票任选八| www.69oz.com-七乐彩准确杀号公式| www.4334.xyz-香港福星彩419期| www.25268.cc-彩铅怎么画阴影| www.87287.cc-三快uu彩票-| www.073921.com-无线代理彩票平台| www.175598.com-快三骰子开奖助手| www.263167.com-彩客网蓝球大小分| www.397704.com-淘宝怎么彩票停售了| www.563849.com-今日福彩图谜总汇| www.646433.com-足彩神器-| www.773412.com-微彩站app合法吗| www.899742.com-天天彩网站-| www.986660.com-彩票五行对应的数字| www.nk6.com-福彩三d走势图连线| www.uf76.com-十大彩票-| www.32vy.com-体彩25日开奖结果| www.1912.vip-会员登录5k彩票| www.9033.loan-越南河内快五彩票| www.69187.com-玩印尼五分彩下载| www.037079.com-最好的3d彩票软件| www.141204.com-福彩3d老猫出彩| www.267708.com-中国竞彩官网网址| www.492200.com-竞彩足球怎么看欧倍| www.575182.com-官方时时彩票| www.658419.com-博都国国际彩票| www.805420.com-河内时时彩官网地址| www.886281.com-逼真彩铅画作品| 91彩票www.9155e.com| www.gc24.com-福利彩票预测专家| www.a75.cn-全国体彩开奖公告| www.38er.com-北京七星彩最新图规| www.0315.love-体彩店距离限制| www.7977.org-2019彩虹跑报名| www.58657.cc-新浪彩票彩报网| www.045686.com-彩6下载应用| www.150172.com-万豪彩票牛牛总是输| www.263337.com-管家婆彩图-| www.362367.com-仿写彩色的梦二年| www.497794.com-十三国际彩票邀请码| www.573759.com-有人给我发腾讯彩票| www.698038.com-彩票篮球中奖规则| www.780398.com-上海彩票选4的玩法| www.899901.com-288彩票在哪里| www.981125.com-體彩-| www.es1.com-快三万能三码| www.sc30.com-吉林快三能输钱| www.05wv.com-五彩斑斓的黑下一句| www.73yf.com-3d大彩报彩图| www.1677.vip-乐彩网福彩网| www.019713.com-uu彩票购彩大厅| www.133849.com-网上买彩票赚钱骗局| www.234602.com-新彩吧3b字谜| www.320096.com-百宝彩票查询助手| www.398748.com-七星彩开奖号码连号| www.773394.com-彩论坛-| www.890601.com-反水最多的彩票网| www.975736.com-购彩网下载官方版| www.dn50.com-买彩票中大奖的咒语| www.xc07.com-福彩快三一共多少期| www.19wa.com-22彩票平台提现| www.30351.com-中国体彩最新开奖| www.98928.cc-足彩胜负彩复式表| www.082399.com-正规购彩软件| www.157787.com-澳客竞彩必发盈亏| www.289040.com-一分快三龙-| www.372022.com-体育彩票大乐透几点| www.460069.com-炫彩背包怎么用| www.545588.com-体育彩票店加盟电话| www.650149.com-博彩众人什么意思| www.732058.com-百福彩正规么| www.799503.com-有彩金送的彩票网址| www.869132.com-数学几何在彩票| www.962649.com-彩票平台银河| 吉利彩票www.66376n.com| www.fh87.com-各种釉彩大瓶的故事| www.vi35.com-信嘉购彩大厅| www.05ed.com-彩铅绘画人物图片| www.67uz.com-体彩双色球玩法介绍| www.0536.loan-福彩三的牛彩图迷| www.9374.cm-新快报彩票金钱豹| www.46094.com-时时彩全天计划宝典| www.88267.cc-吉彩宝-| www.037053.com-成化有珐琅彩瓷器吗| www.134414.com-南通体彩-| www.202695.com-彩35下载-| www.266806.com-中发彩票邀请码| www.364407.com-网上彩票开始了吗| www.443678.com-福彩3d天吉全图| www.527585.com-时时彩和值跨度表| www.625708.com-购彩网提现不了| www.685532.com-时时彩官方公告| www.754525.com-秒彩苹果下载| www.858114.com-彩票大赢家百度云| www.911944.com-体彩实体店编号| www.967143.com-福彩3d藏机图正版| 9928彩票www.9928o.com| www.az55.com-澳门快三官网开奖| www.qp43.com-福彩内部数据骗局| www.09hu.com-开彩吧kc8hkk| www.65tn.com-武汉体彩中心在哪里| www.972.cn-七乐彩出号计算方法|