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.06073.com-彩c02网站-| www.96155.com-微山南阳彩礼多少钱| www.24405.cc-快三好假-| www.cc84.com-下载精彩十分走势图| www.92618.com-立彩佳美缝剂好不好| www.01277.com-gc国彩怎样充值| www.52821.cc-二分时时彩怎么玩| www.387078.com-35期彩票开奖了吗| www.657562.com-河北电视购彩票| www.yx25.com-我中了彩票官方网| www.61vk.com-078彩票网站| www.8672.cn-体彩是否有假货| www.854482.com-福彩3d投注时间| www.949487.com-足彩北单只能在北京| www.ia2.cc-河南新快三开奖结果| www.813663.com-宁夏彩票最大奖| www.897103.com-亿发彩票-| www.972846.com-陈赫中奖的彩票号码| www.zh10.com-七乐彩专家杀号| www.54yt.com-贵州福利彩票加盟| www.3060.cn-乐喜彩票网地址| www.91611.com-炫彩油画联盟骗局| www.703278.com-265彩票网站| www.796244.com-买彩票选号的规则| www.889153.com-快三豹子多少钱一瓶| www.99300.cc-五分彩胆个位| www.667113.com-福彩三d选号王| www.580756.com-高反水彩票-| www.691859.com-76c彩票一靠谱| www.890731.com-彩票亏的倾家荡产| 500彩票网www.960737.com| www.1859.xyz-3走势图彩吧助手| www.8263.biz-彩票多级遗漏| www.62386.com-全民福彩是否合法| www.026836.com-刷彩金兼职平台| www.11591.com-双色球彩乐乐预测| www.fl4.cc-时时彩官方-| www.607016.com-福彩控主任诗| www.68642.com-尊彩客户端下载| www.248898.com-江苏快三走势图查询| www.51zi.cc-福彩东方六加一开奖| www.0527.xyz-3d彩票奖号-| www.6381.biz-黄金彩app-| www.657588.com-大乐透彩票杀号软件| www.653762.com-澳门体育彩票| www.131311.com-体彩宝石之王中奖率| www.287897.com-彩票中奖装b神器| www.587081.com-87彩店最新版本| www.768318.com-今天足彩十四场比分| www.931780.com-我要体彩排列五| www.206452.com-福彩快乐彩走势图| www.502327.com-体彩排列3报纸图片| www.192628.com-快三压大小稳赢公式| www.3494.top-现金彩票靠谱吗| www.359819.com-足彩赚钱的人多吗| www.436079.com-昭通市体彩中心| www.524022.com-918彩票官方网站| www.587967.com-佳能彩色复印机a3| www.653231.com-澳门星星彩官方网| www.713505.com-只能猜大小的彩票| www.781429.com-微彩吧下载地址| www.859383.com-河北省福彩中心电话| www.914022.com-排三乐彩网走势图| www.974192.com-河北省福彩中心| 500彩票www.647377.com| www.381461.com-星期五哪些彩票开奖| www.jc7.com-河南快三基本走势| www.705011.cc-爱彩乐江苏-| www.lh82.com-彩八彩票app| www.52br.com-日本彩票中奖率高| www.0171.org-颜料七彩色-| www.300873.com-南方双彩下载| www.203127.com-11选五彩票顺口溜| www.569365.cc-时时采彩开奖查询| www.849982.com-玩分分彩的经历| www.979381.com-体彩七位数走势图表| www.709900.com-彩票复选是什么意思| www.986345.com-竞彩足球分析网站| www.aa92.com-体育彩票大乐透骗局| www.xb91.com-七星彩808长条| www.21dg.com-彩6各个版本| www.520987.com-必发彩票是非法| www.61876.com-双色球彩票兑奖时间| www.537544.com-有彩色系名称| www.345455.com-好客彩票官网网址| www.16887.cc-中国彩票云发购| www.402133.com-uk彩上级-| www.687625.com-彩票返利是真的吗| www.773212.com-重庆时时彩玩法| www.973779.com-鸿彩彩票平台| www.a67.top-快三网上猜赔率| www.57js.com-体彩竞彩打票示例| www.2255.cm-纲手彩图百度云| www.9831.com-福彩3d1750o| www.73187.com-利盈彩票是真的吗| 大赢家彩票平台www.136057.com| www.865531.com-彩票加盟电话| www.qk60.com-立彩官网-| www.010.host-e乐彩专业版| www.4416.com-体育彩票105| www.9561.xyz-七星彩票试机号| www.464847.com-pp彩票怎么样| www.953414.com-好彩论坛08599| www.8782.online足彩大数据模型推荐| www.287652.com-足彩会让人倾家荡产| www.363575.com-揉纸法重彩画| www.442855.com-懂彩-| www.525833.com-3d彩票奖金多少| www.088073.com-亿彩下载安装| www.un8.com-乐和彩网首页| www.655480.com-网易彩票合不合法| www.081179.com-福利彩票提成多少| www.132300.com-中国福彩天津快三| www.207899.com-手机版彩票过滤工具| www.813945.com-江苏快三胆码计划| www.886660.com-永乐彩票骗局| www.955550.cc-竞彩2串1销量排行| 350彩票www.350zf.com| www.540931.com-三三彩票网站| www.519692.com-快三高手稳赚技巧| www.08352.com-彩票宣传广告词| www.7766.cc-彩九苹果可以用吗| www.377008.com-东方红彩票-| www.337801.com-火星彩票注册邀请码| www.656910.com-香港668彩票下载| www.955991.com-全部彩票开奖查询| www.2925.xyz-体彩店名称-| www.303552.com-好彩三玩法-| www.71575.com-彩票怎么看不懂| www.601681.com-南阳彩票大奖得主| www.781583.com-头头博彩客户端| www.928109.com-彩色复印机复印钞票| 必发彩票www.677879.com| www.786373.com-搜狐福彩体彩天霁| www.873465.com-彩票全天人工计划网| www.954491.com-通博彩票官方网址| www.my01.com-分分彩口诀-| www.009532.com-163彩票app-| www.194670.com-福彩3d跨度走势图| www.281522.com-时时彩和值看号经验| www.18se.com-周日什么彩票开奖| www.934557.com-快彩客服电话| www.89759.com-年会发彩票-| www.978794.com-香港中彩彩票公司| www.566115.com-易彩彩民福地进不去| www.gf07.com-彩20app-| www.463.biz-福利彩票百度百科| www.24qq.com-如何下载87彩店| 吉利彩票www.80065k.com| www.149886.com-悟空彩票下载| www.cp6236.com-500彩票-| www.60664.com-快三秒胶水百科| www.106510.com-福利彩票3月21号| www.2512.biz-饰彩的饰的意思| www.657868.com-彩民村心水之家| www.0gw.com-乐彩网官方平台| www.270669.com-神马彩票网站是多少| www.105182.com-吉快三和值单双大小| www.246950.cc-体彩大乐透中奖概率| www.439925.com-重庆时时彩长龙提醒| www.617782.com-廊坊市体彩中心| www.113421.com-500万彩票网股价| www.228210.com-内蒙快三彩经网| www.200613.com-够力表七星彩|