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.531255.com-彩票系统开发公司| www.195500.com-老时彩五星走势图| www.123698.com-排列三乐彩网首页| www.124954.com-腾讯5分彩网站| www.336776.com-河北快三黑红号预测| www.456762.com-七马彩四不像| www.663861.com-大庄家彩票软件| www.821661.com-聚彩汇骗人的吧| www.946792.com-蓝宇彩钢围挡| www.ay55.com-彩票开奖大乐透走势| www.9tz.com-七星彩今天开奖号码| www.760553.com-上海快三和值走势| www.38796.com-49cc彩票下载| www.286851.com-安徽快三遗漏走势| www.841022.com-竞彩与外围对冲公式| www.151611.com-77彩票网是真是假| www.999661.com-什么网站可以买彩票| www.2635.cm-时时彩改-| www.08086.com-网购大乐透彩票| www.54224.com-七七彩票怎么玩法| www.010089.com-福彩3d微信讨论群| www.097997.com-五分快三彩票合法吗| www.184616.com-广东体彩网-| www.667077.com-马来西亚博彩正规吗| www.923454.com-竞彩服务器-| www.fo49.com-e球彩进球数规律| www.44ed.com-七彩教育是什么| www.902905.com-吉祥彩彩票客服电话| www.76818.com-e乐彩登录平台| www.260327.com-网上彩票赌博合法吗| www.589575.com-足彩专家推荐预测| www.906884.com-高频彩技巧论坛| www.310228.com-长春市体彩中心主任| www.3998.biz-竞彩足球真能赚钱吗| www.177380.com-如何破解快三买下期| www.566239.com-智能彩票安卓下载| www.47543.com-广州体彩中心| www.666116.com-500彩票双色球| www.0117.org-福彩怪字王-| www.622078.com-河北保定快三今天| www.773097.com-天际彩票官网| www.836372.com-湖南体彩网手机版| www.830397.com-彩票查询中奖软件| www.878964.com-体育彩票大乐透查询| www.440202.com-中彩那一天课文朗读| www.731584.com-众彩平台下载| www.680781.com-怎样戒掉买彩票| www.254725.com-一分彩开奖-| www.697173.com-皇彩票下载-| www.ec.cc-网络福彩快三| www.220797.com-福彩中彩网官方网站| www.gq4.com-安徽快三漏洞| www.541110.com-彩票网站怎么做| www.594919.com-七星彩票杀号360| www.085208.com-红包彩票直播间| www.1941.date-玩彩票软件犯法吗| www.66171.cc-买彩票源码什么意思| www.670305.com-时时彩追冷号多少期| www.44gg.com-彩之云怎么刷脸| www.339246.com-永利发彩票平台网站| www.501468.com-易彩云客服-| www.973927.com-幸运五星彩开奖记录| www.898139.com-福彩3d专业走势图| www.763291.com-福建福彩票-| www.951503.com-谁有qq彩票交流群| www.20450.com-湖北快三开奖下载| www.218956.com-百姓彩票是真的吗| www.492325.com-黑彩可以控制开奖| www.713973.com-即时彩票app下载| www.294385.com-彩票1516网址| www.964404.com-2元彩票下载安装| www.489079.com-爱彩双色球走势图| www.310439.com-彩票k线软件| www.586388.com-体彩大乐透九宫图| www.839960.com-买pc彩票-| www.004452.com-三彩网是什么意思| www.089506.com-台北快三有什么规律| www.119553.com-买彩票的心情说说| www.225506.com-新快三单机游戏| www.352897.com-3.6亿中奖彩票图| www.481156.com-河北快三的结果查询| www.16033.com-电脑福利彩票七乐彩| www.89122.cc-248彩票怎么样| www.185389.com-一定牛彩票网官网| www.288990.com-彩票改时间了吗| www.9108.vip-多彩贵州网黄平频道| www.689322.com-山东福利彩票群英| www.876038.com-快乐彩票是正规的吗| www.7796.vip-我的博彩心得| www.97982.com-神兽时时彩下载| www.076844.cc-分分中彩票网页版| www.214434.com-人人彩票手机版| www.298922.com-彩13官网-| www.408402.com-福彩3d数字图| www.552659.com-彩彩网8.5邀请码| www.637692.com-彩票发展趋势| www.713727.com-什么彩票软件比较好| www.796045.com-手机彩膜多少钱一张| www.1377.com-九龙彩票英国五分彩| www.mw76.com-微彩吧被骗-| www.370398.com-彩铅画动漫人物简单| www.5756.org-江苏体彩地址| www.918005.com-私彩数据会上官方| www.lw89.com-时时彩助赢免费计划| www.281963.com-时时彩止损技巧| www.292677.com-湖北快三牛采走视图| www.867308.com-v8时时彩-| www.078016.com-天马彩票是不是骗局| www.328245.com-港彩三中三高手论坛| www.714242.com-时时彩几种倍投方案| www.08qz.com-login彩票坊| www.775793.com-海盗团队彩票计划| www.4013.net-澳彩低于香港马会| www.400857.com-七乐彩直播频道| www.028259.com-彩排什么-| www.332166.com-体彩竞猜输了好多| www.146.in-彩虹张惠妹mv| www.86fj.com-078彩票计划网| www.w22.xyz-刘远七乐彩-| www.647211.com-足彩过滤技巧| www.872955.com-七彩网江苏快3| www.782872.com-易购彩赚钱是真的吗| 彩票驿站www.2350w.com| www.61hq.com-福彩开奖预测号码| www.ic48.com-现在怎么买足彩| www.290798.com-3d胆码家彩网| www.339634.com-快三上瘾-| www.540756.com-418彩票下载| www.725643.com-彩票被洗了还能兑奖| www.962748.com-五分彩app计划| www.106869.com-七号彩票下载安装| www.js50.cc-下载火箭彩票vip| www.500914.com-彩色证件照是什么底| www.987490.com-广西省福彩中心| www.q46.cc-快三助手好用吗| www.11770.cc-广东彩王准确资料| www.878965.com-极速赛车彩票技巧| www.5516.me-福彩3d贴吧| www.661205.com-梁老师彩票揭秘| www.170470.com-江西体彩十一选五| www.024628.com-加盟福利彩票挣钱吗| www.295327.com-福彩选四开奖号码| www.649001.com-九州博彩检测线路| www.804136.com-乾特火箭彩票app| www.qw36.com-福彩快三秘密| www.501.tv-668彩票充值被骗| www.985143.com-竞彩盘口规律| www.06my.com-福彩在哪里兑奖| www.980008.cc-彩票担保人-| www.63el.com-有哪些平台在卖彩票| www.3826.cm-七星彩个位十位数| www.66619.cc-彩票梦想站-| www.061676.com-彩票免费预测彩经网| www.288825.com-彩票推广术语大全| www.097980.com-下载万彩吧并安装| www.693046.com-上海福彩短信投注| www.695957.com-足彩比分网-| www.4299.cm-体彩双彩论坛三句话| www.781788.com-宝马集团时时彩网址| www.rx93.com-快三机选一注| www.16975.com-富彩网-| www.155808.com-非法经营彩票罪分析| www.83262.com-彩票平刷思路| www.2309.org-b2彩球网平台租出|