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.1229.net-重庆时时彩计划手机| www.1270.wang-福建体育彩票网站| www.115436.com-1号店彩票-| www.845694.com-福彩有哪几种玩法| www.110367.com-聚富大发快三计划| www.180586.com-快三是福彩还是体彩| www.01999.cc-遗言彩票-| www.955947.com-新彩彩票下载安装| www.7556.com-福彩3d技巧牛材网| www.799116.com-大发快三登陆网站| www.935082.com-平台彩票ios版| www.rf03.com-天津市彩历史| www.65kq.com-双色彩票开奖号| www.1820.in-体彩大乐透三位数| www.35518.cc-宝马彩票向日葵团队| www.0728.date-易彩堂快3技巧| www.19314.com-彩发发app官网| www.2252.cn-大中华平台彩票| www.181106.com-旺球彩店app| www.38599.cc-爱上彩票下载| www.85hk.com-老马研彩最新推荐| www.246116.com-3d牛彩-| www.505480.com-乐彩网3b试机号| www.699157.com-彩名堂手机计划| www.jn15.com-快三输了报警| www.785883.com-北京福彩专刊| www.67pd.com-福彩三d小军第五版| www.175562.com-1分钟彩票app| www.545342.com-彩票组合生日的软件| www.7390.vip-哪个平台可以买竞彩| www.288280.com-彩票屠龙计划客户端| www.906920.com-极速快三稳赢技巧| 大赢家彩票www.327836.com| www.ap99.com-贵州福利彩票总部| www.156777.com-福彩主任贪了多少亿| www.984637.com-九鼎彩票平台注册| www.0uj.com-乐彩网的专家怎么样| www.4297.biz-那个鑫彩网怎么举报| www.9938.in-彩乐汇平台官方网站| www.199365.cc-福利彩票复式玩法| www.062694.com-时时彩送彩金19| www.vv91.com-数学教授彩票大奖| www.qd02.com-彩票销量下滑| www.777090.com-宝盈彩app-| www.900457.com-中国体彩快乐扑克4| www.62ag.com-彩31苹果手机下载| www.839767.com-中国福利彩票图纸| www.675610.com-彩票三等奖多少钱| www.437754.com-大乐透彩票字谜| www.531429.com-下载福彩3d字谜| www.wh62.com-彩票走势怎么看| www.18yc.cc-快购彩票赛车直播| www.638557.com-111+cc彩票-| www.566574.com-福彩幸运彩开奖| www.368761.com-快三有什么技巧不| www.9026.top-爱彩票投注网| www.930554.com-七星彩梦兆查询| k3k3彩票www.602742.com| www.rt16.com-天空彩-| www.612285.com-幸福彩手机报准确吗| www.699647.com-快三计划群里面的托| www.776527.cc-时时彩什么叫组三| www.853144.com-大红鹰彩票红包| www.917660.com-海南彩玩法-| www.974997.com-彩c02彩票-| www.cp4789.com-彩票外挂手机版| www.025362.com-旭彩网开码-| www.mt85.com-彩神8快3违法吗| www.43095.com-彩票双色球几点停售| www.161229.com-三星福彩有限公司| www.241998.com-新浪彩票下载| www.sb8.cc-快三买和值-| www.ry83.com-彩256app-| www.14dr.com-湖北快三牛彩下载| www.96zn.com-人生没有彩排议论文| www.237428.com-快三微信群解密| www.093357.com-福彩体彩合并改制| www.790778.com-福彩直播开奖记录| www.57829.com-体彩七位数游戏规则| www.021327.com-湖北体彩网官方网站| www.094342.com-3彩家-| www.161770.com-美国快开彩票| www.yh1.com-乐彩网大发快三登录| www.502.tv-第一的彩票投注网站| www.78544.com-采金网彩免费资料| www.045559.com-安徽福彩站怎么申请| www.890017.com-国内合法彩票平台| www.956512.com-新未来彩票平台| 网易彩票www.067wy.com| www.316890.com-幸福彩票-| www.111511.com-下载盈彩网-| www.203996.com-上海福彩基诺走势图| www.756213.com-凤凰彩票时时彩计划| www.18911.cc-中国足彩馆踩踏喂食| www.979216.com-什么便利店有绿好彩| www.ar22.com-贵州体彩官网| www.956084.com-玩时时彩能赚钱吗| www.237751.com-竞彩网计算器胜平负| www.339050.com-时时彩报-| www.553376.com-快三如何躲避长龙| www.163920.com-彩票太害人了| www.365898.cc-多大孩子可以学彩铅| www.710561.com-外围彩票-| www.811318.com-哪些彩票中奖率高| www.78qq.com-体彩大乐透和值| www.0836.cn-彩票驿站平台app| www.29ny.com-体彩今天出什么码| www.252987.com-时时彩计划在线计划| www.532251.com-彩票道术-| www.163064.com-福彩排列三走势结果| www.bg10.cc-福彩双色球预测军辉| www.657174.com-360彩票登录| www.952600.com-k彩手机登录| www.eo95.com-快三杀号技巧| www.9908.me-彩票33期开奖结果| www.311902.com-快三彩票送彩金| www.332390.com-彩票mobile-| www.697021.com-官方彩票网站有哪些| www.809247.com-体彩双色球怎么买| www.894865.com-河南福利彩票幸运二| www.968608.com-怎么找刷彩金的平台| www.bg15.com-福彩双色球预测分析| www.688950.com-网上怎么买福利彩票| www.789743.com-规划竞彩是传销吗| www.881742.com-购彩网注册邀请码| www.947703.com-多彩贵州网陈永堂| www.988159.com-福彩积分服务网| www.rt4.com-大发快三系统破解| www.733334.com-时时彩开店-| www.506038.com-优彩娱乐骗局| www.cp3533.com-江苏快三推荐号| www.242369.com-快三开走势图| www.008546.com-16号的体彩开奖号| www.1630.xyz-彩克星官网-| www.892036.com-竞彩3串1中大奖| www.028075.com-星际彩票合法吗| www.u82.com-彩票宝买彩票可靠吗| www.757059.com-全民彩网是不是骗局| www.855030.com-爱彩彩票是合法的吗| www.929716.com-时时彩三星和尾| www.985900.com-送彩金18元可提款| www.cp3573.com-大发快三计划预测| www.8684.net-中彩了是什么意思| www.765223.com-七星彩够力网| www.872936.com-遵义桐梓彩票店转让| www.952715.com-快三心得验证| www.995861.com-足彩ios-| www.cp9.com-福彩快3中奖查询表| www.297357.com-河北快三彩票| www.020672.com-彩票平台源码出售| www.095132.com-大奖网彩票下载| www.525768.com-c58彩票手机下载| www.887665.com-阿里彩票被坑| www.952849.com-旺彩双色球打不开| www.988925.com-微彩彩票下载安装| www.cp1676.com-十分快三计划预测| www.710089.com-彩票台子-| www.795794.com-新加坡toto彩票| www.849522.com-中国富彩3d开奖果| www.903697.com-彩八彩票手机版| www.952445.com-k彩平app-| www.984634.com-乐8网彩票靠谱吗| www.bu37.com-彩票长龙提醒| www.ps73.com-3分彩的官网|