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.388320.com-华彩app-| www.nd88.cc-爱彩票破解-| www.66lo.com-彩票数字统计学| www.3778.xyz-体彩七星彩那天开奖| www.19656.cc-老挝博彩打工| www.015050.com-海南七星彩口诀| www.360020.cc-中国副利彩票官网| www.465788.com-好彩店彩票软件下载| www.20wq.com-怎么投诉彩票店| www.6791.biz-足彩一彩票-| www.47953.com-韩国彩票玩法规则| www.1484.tv-竞彩电脑版-| www.8185.bid-8炫彩是什么| www.30966.cc-彩票3d大奖得主| www.82817.cc-搜狐彩票网电脑版| www.051771.com-发彩网改网址了吗| www.7516.loan-体育彩票门店| www.53725.cc-福彩三专家欲将奖号| www.812370.com-福彩3d高手经验谈| www.951038.com-信誉彩票导航| www.ni37.com-足彩专家推荐分析| www.876685.com-香港正版挂牌彩图| www.iy13.com-温州体彩中心地址| www.87vj.com-手机万能彩膜批发| 亚洲www.296180.com| www.tm67.com-梦中解彩专家专栏| www.39rn.com-风雨彩虹-| www.4442.xyz-奇妙趋势彩票分析| www.38522.cc-海南七星彩计划软件| www.96929.com-彩票中奖真假| www.226830.com-彩虹玫瑰-| www.3306.biz-彩色简笔画圣诞老人| www.023949.com-如何买境外足彩| www.2871.xyz-湖南体彩中心电话| www.498131.com-易网彩票走势图下载| www.029917.com-福彩快三苹果版| www.23fi.com-彩票高手软件| www.916.space-福彩站的收益怎么看| www.994812.com-福利彩票七乐买法| www.431914.com-彩票那天开奖| www.667981.com-福利彩票买哪个| www.793571.com-体彩算不算赌博| www.k05.xyz-现金游戏网彩票| www.748748.com-爱中彩扫码下载| www.886104.com-神州飞速时时彩下载| www.986224.com-体彩p3走势图| www.hn0.com-彩票怎样算长龙| www.rf72.com-168娱乐彩票平台| www.690540.com-鹰彩注册-| www.441238.com-鼎盛彩票手机平台网| www.57275.cc-锋彩直播app| www.008309.com-大乐透大彩网走势| www.246400.cc-七星彩开奖历史记录| www.9ha.com-体彩传统7位数玩法| www.57862.com-精准快三计划| www.5853.cm-福彩直选3开奖结果| www.5424.pw-太原彩钢板厂家| www.111197.com-快乐十分钟彩票下载| www.241933.com-体彩门头图片大全| www.321908.com-彩票双色球中奖神器| www.9509.in-今日运势一彩票| www.133957.com-贵烟新好彩多少一包| www.239652.com-贵州快三选五一定牛| www.196292.com-123彩票开奖网| www.611822.com-万彩吧里面的高手| www.701023.com-足彩对阵表分析| www.23128.com-国彩下载安装到手机| www.984151.com-彩民彩票怎么打不开| www.973958.com-竞彩模拟投注app| www.852578.com-分分彩是正规的吗| www.974724.com-双色球中奖彩票票样| www.iv9.com-内蒙快三下载安装| www.wr36.com-大学生购买快三| www.46ci.com-广西十分彩快乐十分| www.971.net-试玩彩票app| www.17193.cc-竞彩截止购买时间| www.461800.com-买黑彩网站-| www.30kl.com-昨天晚上福彩出什么| www.1818.site-三位数体彩-| www.898401.com-中国福利彩票乐透型| www.563906.com-大通了彩票-| www.827136.com-大富豪官网彩票| www.pp32.com-福彩3d新浪直播| www.477435.com-彩神通四码会员资料| www.618562.com-w彩票-| www.068930.com-网上代玩彩票赚佣金| www.155654.com-彩票网站大全排行榜| www.232637.com-上海快三玩法说明| www.044225.com-彩之家苹果版| www.220972.com-彩票助赢网页手机版| www.760747.com-送彩礼和嫁妆| www.719508.com-下载江西体育彩票| www.552206.com-乐米彩票官网登录| www.254110.com-彩票app如何| www.jn59.com-5亿彩下载app| www.838511.com-七星彩开奖号今天| www.52076.com-彩名堂苹果版下载| www.51ym.com-极彩在线登录| www.259722.com-彩票选号大师| www.11174.com-福彩快开彩是什么| www.z43.net-金彩网正规吗| www.311497.com-幸运飞艇彩票| www.900052.com-天天竞彩彩票下载| www.106800.com-彩票输钱了有黑客吗| www.320071.com-七星彩规律-| www.503527.com-福建省福彩发行中心| www.633071.com-网上竞彩店怎么做| www.766828.com-好运彩彩票骗局| www.979458.com-中彩网客服中心| www.b88.biz-时时彩快3一分技巧| www.888.cx-彩客网客户端下载| www.01130.cc-彩金国际娱乐| www.98853.cc-中国体彩几点停售| www.678858.com-永利新注册送彩金| www.811008.com-乐享竞彩是什么| www.904968.com-雅彩足球彩票下载| www.975734.com-确山彩礼-| 500彩票www.607212.com| www.o74.cn-体育彩票有几位数| www.940961.com-福利彩票任三| www.179232.com-福彩安徽快三玩法| www.564643.com-信阳体彩管理中心| www.565339.com-彩票平台合法吗| www.639174.com-太原福彩中心电话| www.766720.com-人人快三真假| www.234679.com-安微快三预测| www.358088.com-南国彩票版杀手之王| www.473878.com-天t空彩票与你同行| www.568378.com-京彩app上不去| www.666208.com-彩虹航天-| www.737011.com-彩20-| www.799655.com-体彩开奖号码公告| www.875094.cc-酷彩吧彩票下载| www.936328.com-凤凰时时彩平台官网| www.979701.com-荆州体彩店怎么开| www.cai532.com-快三计划软件安卓版| www.qw08.com-彩票辅助软件| www.33jr.com-福彩春节-| www.327.live-中国传统色彩名称| www.2622.com-彩票聚合官方端口| www.7388.mobi-网上购买竞彩| www.027846.com-龙胜国际投彩正规吗| www.18219.cc-福彩快三中奖有多少| www.58471.com-韩国都有什么彩票| www.971445.com-易彩票下载网址| www.030840.com-新浪彩票双色球走势| www.092569.com-福建体彩程序下载| www.948821.com-体育彩票类型图片| www.200032.cc-福利彩票开开奖结果| www.372710.com-八彩娱乐app| www.531637.com-新浪nba篮彩预测| www.646463.com-竞彩口决-| www.789898.com-福彩双色球诗迷汇总| www.885153.com-国民彩票官网| www.999494.com-福彩排列三走势结果| www.298997.com-彩票最新开奖查询| www.430551.com-南京丰彩-| www.549909.com-网上不能买足彩| www.655020.com-买彩票官方客户端| 彩神网www.csw288.com| www.797762.com-点滨和易彩哪个好| www.908038.com-网上彩票的骗局揭秘| www.423641.com-双色彩开奖结果| www.134585.com-计划彩票是真的吗|