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天

知道了
彩01彩票 www.450598.com-105约彩-| www.954935.com-入侵黑彩网站工具| www.aa5.cc-双彩-| www.tp34.com-什么是安徽快三| www.904963.com-网易彩票江苏快3| www.987759.com-505彩票本着| www.cr39.com-9彩官方app-| www.zh02.com-鑫彩国际是什么意思| www.268051.com-668彩票网app| www.06ho.com-爱好48色彩铅色卡| www.930670.com-彩票的税收是多少| www.uu84.com-重庆大快三下载| www.16432.com-竞彩足球几点开奖| www.uo9.cc-彩票中奖查询表| www.952476.com-彩票验奖app| www.cp7778.cc-江苏快三赢的人多吗| www.709082.com-博盈彩票网合法吗| www.808088.cc-万优彩票平台官网| www.898966.com-湖北福彩快三结果| www.974859.com-腾讯分分彩跨度技巧| www.ak88.com-南国彩票特区| www.e05.com-彩票计划软件ios| www.653777.com-投资彩票可以赚钱吗| www.731994.com-今日佬牛足彩| www.810511.com-博乐彩票下载| www.899846.com-天天中彩票软件| www.981047.com-49官方彩票-| www.cs44.com-彩神8平台不给提现| www.d16.top-购买快三的彩票软件| www.330299.com-沧州市福彩兑奖中心| www.473770.com-福彩中三个好| www.395315.com-梅州彩民中奖| www.287326.com-万能数字型彩票软件| www.400156.com-下载湖北快三助手| www.310356.com-兴平体彩-| www.430203.com-宝利国际彩票| www.550467.com-全发彩票怎样玩| www.630516.com-乐米彩票中了| www.750492.com-旧版九歌彩票网下载| 天下彩www.433680.com| www.984940.com-彩运8注册-| www.bb42.com-大发快三能挣钱吗| www.zj44.com-快三杀号定胆| www.775089.com-k彩大神有吗| www.903803.com-进球彩开奖结果| www.977056.com-河南彩礼新规定1| www.dq7.cc-各种釉彩大瓶| www.wd56.com-购彩吧688345| www.596543.com-彩博士杀码-| www.974857.com-手机中国福彩网下载| www.cp6977.com-河南快三结果| www.qh64.com-厦门好彩烟-| www.5lg.com-分享分分彩打法论坛| www.051072.com-高频彩有赚钱的吗| www.z69.shop-高频五分彩走势图| www.829894.com-18彩-| www.949263.com-社会福利彩票双色球| www.fr3.cc-彩票玩法-| www.568042.com-从手机怎么买体彩| www.282871.com-ios版彩票33| www.285691.com-481彩票-| www.373358.com-好彩铁盒10盒装| www.355610.com-竞彩怎样不交税| www.453772.com-怎么识别彩票站真假| www.551555.cc-贵州快彩app| www.622071.com-河北快三今日开奖| www.693076.com-抢彩票违法吗| www.770837.com-七彩山鸡养殖基地| www.870500.com-52彩票网-| www.954910.com-澳洲5分彩杀号| www.vu25.com-福彩是真是假| www.jp33.com-福彩3d专家推荐| www.4307.top-体育彩票站中奖提成| www.141888.com-南京时时彩诈骗案| www.323178.com-彩票132-| www.35562.com-福彩3d历史开奖| www.91226.cc-日景彩烟多少钱一个| www.947129.com-大福彩票合法吗| www.95uh.com-圣彩票-| www.5888.cm-长春体彩11选五| www.118772.com-辽宁省体彩发行中心| www.246099.com-爱彩彩票网官网首页| www.593577.com-七彩格子最新消息| www.uc81.com-高频彩计划app| www.428847.com-福利彩旗下的快开| www.741982.com-湖南彩体育彩票| www.dc02.com-彩票体彩预测| www.23kz.com-体育彩票在哪找| www.1916.website时时彩组6怎么追号| www.66oq.com-梦见牛怎么买彩票| www.7125.com-建盏怎样煮出七彩来| www.490588.com-鼎丰彩票-| www.790063.com-青海福利彩票代销| www.998765.cc-中国体育彩票开店| www.26868.cc-刮刮乐福彩自助终端| www.392128.com-体彩小品-| www.887543.com-足彩翻倍投注| www.150159.com-彩8aqq下载彩票| www.906444.com-买哪种彩票容易中奖| www.969628.com-乐乐彩票官网| 大赢家彩票平台www.529026.com| www.tq47.com-幸运28彩票-| www.12102.com-爱乐透彩票下载| www.7ph.com-彩票怎样玩才赢钱| www.954696.com-彩票高手123| www.6071.biz-彩票多文本思路| www.184381.com-福彩全图-| www.365944.cc-彩票29-| www.728464.com-重庆大快三下载安装| www.mv98.com-分分彩万能公式| www.tr29.com-代刷彩票流水骗局| www.65cb.com-双色球彩币预测免费| www.9vm.com-微博彩票信息| www.75ji.com-玩足彩有赢的吗| www.1021.com-梦见火代表的彩票号| www.xi82.com-优乐彩开奖网下载| www.45pv.com-盛大娱乐彩票合法吗| www.09738.com-齐鲁彩票几点开奖| www.148944.com-中彩网电脑版| www.94ep.com-彩票的串-| www.8431.org-2012七星彩-| www.96ca.com-投彩的意思-| www.863819.com-159彩票网下载| www.cp6671.com-中国福彩软件下载| www.131923.com-苍山订婚彩礼| www.201364.com-购买双色球彩票网站| www.262040.com-福彩网走势图| www.379693.com-夫妻因幻想中彩票| www.585894.com-网上博彩的网址| www.652558.com-精彩大乐透频直播视| www.708192.com-状元彩票诈骗| www.766878.com-糖果彩邀请码| www.835281.com-彩票藏机图大全| www.895854.com-彩票123网址大全| www.951277.com-足彩波胆什么意思| www.988118.com-副利彩票中将结果| www.gd9.com-彩票的玩法技巧大全| www.kr51.com-上海中国体育彩票| www.635349.com-七彩假期旅行社| www.q17.com-河北快三冷号| www.975786.com-云购彩票下载安装| www.663974.com-七星彩第43开| www.810522.com-盈彩彩票钱提不出来| 辉煌彩票www.2875y.com| www.53835.cc-多彩贵州招聘| www.139206.com-67彩骗人-| www.614112.com-黑彩是什么-| www.460898.com-世界杯买彩票在哪买| www.105296.com-体彩竞彩胜平负开奖| www.215650.com-青海快三今天推荐号| www.212201.com-快三漏洞看哪里| www.355848.com-体彩足球中奖上税| www.316211.com-体彩小终端-| www.750465.com-豪彩vip网址| www.61ts.com-台湾福彩星-| www.933724.com-东彩娱乐是骗局吗| www.gq53.com-快2彩票技巧| www.230257.com-彩票计划员骗术| www.uo80.com-红快三是哪里的| www.457199.com-买彩票的语录| www.ca17.com-牛彩快3专用走势图| www.228287.com-安阳聘礼和彩礼| www.648100.com-分分快三彩预测| www.va61.com-彩投彩票手机投注站|