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.086595.com-快三公交车路线查询| www.019121.com-利彩安全下载| www.969118.com-天天中彩票3588| www.218061.com-139彩app-| www.740883.com-9号彩票线路| www.679652.com-什么叫问题彩民| www.7bw.com-中彩票没兑奖| www.729234.com-玩彩票官网-| www.028496.com-黑彩举报-| www.186871.com-快三复式万能四码| www.273192.com-福彩的宗旨是什么| www.466788.com-七乐彩晚上卖到几点| www.638780.com-福彩公益广告内容| www.222959.com-贵州省彩票中心| www.bq96.com-彩票至尊安卓版| 大赢家彩票平台www.369072.com| www.027924.com-678彩票网安全吗| www.138241.com-577彩票网平台| www.881835.com-彩票注册送彩金| www.503631.com-黑彩平台源码| www.439006.com-cy888彩网-| www.731128.com-易彩快三计划网站| www.805560.com-月季彩铅画-| www.237587.com-下载中国福利彩票| www.529908.com-放黑彩-| www.615491.com-失控的黑彩刘雪龙| www.224072.com-湖北福彩网官网| www.004933.com-浙江体彩大乐透| www.108510.com-传影和彩影-| www.187139.com-重庆福彩官方网站| www.8hv.com-爱彩骗局-| www.282864.com-彩票33苹果手机版| www.118276.com-555彩票网下载| www.11611.cc-彩乐乐选号-| www.020883.com-新浪彩票网站首页| www.307012.com-双色球派彩每日推荐| www.39ca.com-秘鲁彩虹山的形成| www.20eq.com-胜负彩19023| www.23eh.com-彩票排列五玩法| www.07799.com-彩票丢了感觉会中奖| www.8658.in-五洲彩票平台网址| www.55583.cc-简单水彩画教程星空| www.009182.com-七星彩湖北兑奖地点| www.611414.com-网上开彩票投注站| www.664252.com-环彩网官网登录| www.773551.com-2分时时彩哪里的| www.878965.cc-彩票七位数-| www.io86.com-网赌彩票搞鬼| www.j33.xyz-西宁福彩-| www.485550.com-天天彩票的网站大全| www.366876.com-全天分快三稳定计划| www.400506.com-亿彩堂干嘛的| www.539327.com-我附近彩票店| www.675034.com-鸿亿彩票平台| www.771861.com-体彩竟彩开奖时间| www.881745.com-彩票01有没有问题| www.964823.com-福建体育彩票走势| www.cp622.cc-注册快三平台官网| www.qg53.com-买快三和值大小单双| www.11tz.com-亚洲杯彩票怎么玩| www.86xq.com-七星彩论坛海口彩网| www.581040.com-买时时彩犯法吗| www.386738.com-家居彩贴膜-| www.28gn.com-网络彩票还能开售吗| www.223126.com-福彩3d跨度预测| www.94533.com-传统彩网站ig| www.132402.com-安徽灵璧彩礼价格表| www.562915.com-广发彩票网-| www.py2.cc-吉林福彩时时彩| www.xg07.com-时时彩组合玩法漏洞| www.71et.com-体育竞彩什么时候开| www.08530.com-139彩下载安装| www.970408.com-天天乐彩注册送28| www.cp2779.com-什么叫快三倍投| www.lq39.com-今日中彩网靠谱吗| www.c31.loan-亿彩票合法吗| www.22ch.com-彩票更改数据端数据| www.0185.xyz-百度彩票还可以买吗| www.974743.com-快三翻倍投注计划| www.264466.com-正规彩票购彩软件| www.615157.com-三彩玉镯价格| www.739144.com-香港快三软件下载| www.814165.com-福利彩票双色球报纸| www.887321.com-网络彩票属于赌博吗| www.959403.com-快三分几种-| 500彩票www.66653v.com| www.js19.com-彩神l下载-| www.389553.com-买彩书籍-| www.496702.com-小米彩蛋-| www.565314.com-重庆7时彩代理| www.644960.com-七乐彩技巧选号方法| www.101026.com-福彩3d杀码软件| www.296620.com-湖北体育彩票| www.695228.com-体育彩票大奖得主| www.800038.com-今晚福彩票开奖结果| www.913956.com-福彩三百期走势图| www.977561.com-买彩票那个app好| www.092374.com-乐8时时彩首页| www.199868.com-河北快三跨-| www.590085.com-体育彩票虚假| www.687019.com-特彩吧喜中彩| www.760031.com-福星彩运开奖直播| www.463001.com-大掌柜彩票平台网站| www.984700.com-炫彩壁纸-| www.cb46.com-黑彩为什么总是输| www.881458.com-辉煌彩票靠谱不| www.500.cx-黑彩到底能不能赢钱| www.29ve.com-昨日彩票开奖查询| www.136.biz-彩虹屁是啥-| www.70015.com-体彩篮球怎么买| www.t33.top-七乐彩试机号开| www.76vd.com-东莞福彩印刷| www.426.me-彩票3d丹东图| www.01201.cc-足彩赔率即时| www.89805.com-全国竞彩销量排行榜| www.261721.com-内蒙福彩快3推荐号| www.330077.cc-代玩幸运快三靠谱吗| www.395142.com-3d彩票有规律吗| www.488003.com-快三计划一期人工| www.615507.com-福利彩票排列3| www.673455.com-古建彩绘图案| www.731806.com-足彩媒体预测总汇| www.368600.com-福彩3d晚秋字谜| www.77jc.com-外国彩票专家预测| www.021303.com-湖北体彩在哪里兑奖| www.3915.com-四川福彩彩票网| www.ws56.com-一分钟一期快三| www.84hq.com-吴师玩赚彩票| www.2024.net-快三推算下期开奖号| www.7022.cc-虎扑篮彩吧-| www.159357.com-易发彩票分分快三| www.4307.vip-双彩论坎-| www.45675.cc-彩票猜图三d| www.538883.com-福彩在线正规吗| www.220772.com-北京5分彩开奖查询| www.361880.com-易发彩快三-| www.cai3789.com安徽快三预测和值| www.206274.com-时时彩稳赢技巧买号| www.143025.com-快三单双最多出几期| www.863192.com-京彩挂机软件| www.wb63.com-七星彩现场直播视频| www.658503.com-体彩通吃中奖图片| www.719676.com-七星彩大复式| www.27sj.com-博发彩票999| www.196983.com-马来三分彩开奖历史| www.4961.com-超级大乐彩怎么玩| www.94wi.com-买体育彩票技巧| www.ca41.com-赢钱彩app-| www.fl00.com-彩票奖金-| www.685577.com-福彩和值速查表| www.389252.com-福彩怎样加盟费多少| www.665541.com-昨天晚上七乐彩开奖| www.787956.com-今天足球比赛竞彩网| www.916495.com-彩客网触屏版首页| www.16er.com-七彩国际影城爱建店| www.486601.com-呼市转彩票机流程| www.569187.com-重庆时彩宝典下载| www.656653.com-c2彩票下载安装| www.536959.com-手机网投天天中彩吧| www.602478.com-易中彩票下载安装| www.85299.cc-福利彩票双色球扫码| www.964320.com-中国福利彩票500| www.p53.com-彩票网大数据| www.660760.com-阿里彩票正规平台吗|