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天

知道了
彩票123现在叫什么名字 www.214898.com-彩票注册送36元| www.870113.com-uc彩票合法么| www.62kw.com-南国七星精彩论坛| www.4589.org-想中彩票说说| www.61525.cc-乐米彩票为什么停了| www.092518.com-三门峡彩礼价目表| www.263244.com-江苏快三一天多少期| www.458789.com-海南网上怎么买彩票| www.751908.com-扬州彩民大乐透| www.4125.cn-彩虹5无人机价格| www.97150.com-飞龙在天竞彩推荐| www.095053.com-福彩3d购买预测| www.170596.com-快3彩票玩法介绍| www.703968.com-尤师彩票工作室| www.44uq.com-彩之家彩票骗人| www.3050.biz-亚博彩票加盟条件| www.159288.com-乐盈彩票登入| www.701220.com-一分钟大发快彩票| www.790310.com-炫彩界面库教程| www.881470.com-十三国际彩票咋样| www.954084.com-开奖大厅彩票365| www.cai67.cc-内蒙快三-| www.pj87.cc-北京快三走势图形态| www.80gb.cc-糖果派对彩蛋图片| www.539349.com-网络彩票都是假的吗| www.673305.com-福彩什么时间开奖| www.787404.com-立彩app官网| www.cp8528.com-三分快三计划| www.3102.org-彩挂机软件免费版| www.255589.com-七星彩怎么玩| www.a96.cc-彩虹伞最实用的玩法| www.0592.bid-竞彩足球胜负彩| www.26171.com-写彩虹的作文| www.080216.com-体彩大乐透投注方法| www.870521.com-耀州彩票店转让| www.994393.com-微彩是违法的吗| www.tx12.com-海南私彩app| www.3396.cc-k73彩票app-| www.0311.space-彩票网826app| www.06vy.com-上期体彩号码是多少| www.010063.com-人人中彩票双色球| www.519964.com-上海快三包中| www.607381.com-彩票店加盟条件具备| www.698131.com-宁波体彩中奖哪里兑| www.786009.com-xs原彩要不要开| www.860646.com-南京娱乐快三查询| www.950901.com-快三做庄会输么| 中华彩票www.9149i.com| www.lr50.com-福彩网络快三| www.1fh.cc-新2彩票论坛搜索| www.71627.com-快3是福利彩票吗| www.101993.com-彩票能中吗-| www.182776.com-北京快三大图| www.267534.com-福彩3d是不是骗局| www.343567.com-手机挣钱的彩票| www.419896.com-福建福彩快讯手机版| www.532352.com-买彩票中奖的秘诀| www.625944.com-福彩跨度图-| www.692342.com-彩票开奖公平公正吗| www.771353.com-743cc彩-| www.842571.com-河南郸城结婚彩礼| www.901217.com-彩票百科-| www.959826.com-快三平投怎么赚钱| 大玩家彩票www.195090.com| www.623019.com-红牛娱乐彩票| www.793477.com-胜彩asia骗局| www.877167.com-一分彩是官方的吗| www.06609.cc-华彩赢家官网| www.12738.com-体育彩票交流吧| www.ol41.com-福彩种类及规则| www.987688.com-乐八彩票安卓| www.1741.xyz-通鸿网彩票-| www.393448.com-株洲福彩中心主任| www.434643.com-xy969幸运彩票| www.565217.com-毒药独胆福彩今天| www.862577.com-七乐彩下期预测号码| www.fk99.com-大奖彩票棋牌| www.5cq.com-彩乃奈奈百度网盘| www.412460.com-大乐透是什么彩票| www.063833.com-在网上买彩票违法吗| www.067813.com-彩票系统开发商| www.139366.com-如意彩票网登录| www.29321.cc-彩天下-自助服务厅| www.2434.me-手机竞彩足球| www.616579.com-体育彩票抽取汽车| www.702505.com-竞彩怎样买才稳赚| www.779155.com-牛彩网图谜大全| 818合彩www.www.1555hc.com| www.069960.com-温州快乐彩走势图| www.506708.com-新彩吧图谜汇总| www.589082.com-七星彩解梦册| www.695744.com-足彩任选九场预测| www.845612.com-竞彩体彩足球| www.943073.com-703彩票苹果版| www.433530.com-唏关彩资料-| www.556980.com-简单水彩画入门视频| www.664209.com-北京赛车赢彩王| www.762352.com-87升级版云彩店| www.63lv.com-彩票提现被风控| www.3705.vip-福利彩票号码预测| www.45941.com-安卓版大中华彩票| www.58vo.com-500彩计划网站| www.04568.com-足球竞彩微信群| www.48kh.com-兑换彩票-| www.0479.in-旺彩双色球安卓版| www.8388.hk-彩票中奖短信截图| www.38ha.com-55彩票能不能提现| www.17895.cc-阳光彩票客服电话| www.63021.com-胜天半子新浪足彩| www.023560.com-彩6彩票ios-| www.8556.cn-下载七星彩规律表| www.196488.com-百宝彩上海快3| www.763707.com-摩羯足彩预测app| www.833337.com-体育福利彩票自选| www.894675.com-投资彩票怎么赚钱| www.956633.com-玩彩有赢的吗| www.bc5.com-彩票秘诀计算公式| www.lp23.com-三d彩票机号| www.04og.com-线描彩铅画-| www.72cx.com-彩客竞彩app苹果| www.143454.com-福利彩票公司老总| www.212593.com-注册就送彩金时时彩| www.422284.com-新浪爱彩是骗人的吗| www.547955.com-分分彩开奖数据接口| www.626528.com-全中彩票安卓版下载| www.708032.com-竞彩360比分| www.791921.com-中国彩民更懂彩吧图| www.872014.com-我的彩票中奖查询| www.948743.com-南宁快三开奖| 大赢家彩票www.609387.com| www.ia63.com-彩678-| www.54ot.com-投注福利彩票技巧| www.16285.cc-中国足彩欧亚指数| www.299277.com-中福彩票官网| www.089366.com-内蒙快三害死人| www.442179.com-彩票中奖号排三| www.552809.com-北京福彩赛车高频彩| www.655866.com-江苏竞彩网-| www.751750.com-123+彩票网-| www.961594.com-各种釉彩大瓷瓶| www.nb31.com-双阳黑彩新闻| www.87qx.com-在淘宝上怎么买彩票| www.61999.cc-福彩双色球139期| www.12612.com-福彩w-| www.510220.com-彩虹的约定儿歌试听| www.711957.com-e赢彩是黑平台吗| www.791627.com-福彩直播视频| www.921968.com-高频彩前三组绝技| www.974586.com-众盈彩-| www.oq34.com-下载官方彩票软件| www.706226.com-专业玩彩胡先生| www.805420.com-河内时时彩官网地址| www.872495.com-四川体彩七星彩| www.944465.com-体彩手游彩官网| 福彩网www.60007w.com| www.h65.cc-浙江快乐彩助手下载| www.124026.com-中国福彩彩票| www.182881.com-大发快三官方开奖| www.921377.com-足球彩票中奖图片| www.984600.com-炫彩粒子-| www.8ic.com-重庆时时彩数字规律| www.71kd.com-体彩排列三字迷总汇| www.0614.wang-彩票开发告别死工资| www.100772.com-乐彩客登录-|