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.872628.com-256.cm彩票-| www.l44.cc-三d彩神通关注码| www.155180.com-高频彩官私勾结| www.629642.com-网易红彩下载安装| www.235006.com-500彩票apρ| www.326875.com-奥鸿集团彩票合法吗| www.h36.net-五分彩开奖结果记录| www.52yr.com-网络彩票下载安装| www.2029.red-体彩单式票-| www.00237.cc-章鱼彩票靠谱吗| www.128004.com-123彩票开奖公告| www.448434.com-专业彩票计划网站| www.550248.com-彩票扫码摇大奖| www.651719.com-千百万彩票平台下载| www.521901.com-贵州十一选5爱彩乐| www.75tc.com-体育彩票亏吗| www.929326.com-七星彩奖金计算| www.457338.com-买彩票的诗词| www.1597.vip-网购彩导师-| www.238955.com-网上买彩票骗局套路| www.00838.com-更懂彩民-| www.25ja.com-华彩什么意思| www.376762.com-河南福利幸运彩| www.61018.com-李彩铃-| 500彩票www.50051e.com| www.936273.com-福彩网怎么注册| www.dy49.com-重庆福利彩票| www.89.cc-彩票网钱取不出来| www.56kv.com-体彩刮刮乐下载软件| www.5234.biz-万优彩票链接| www.132295.com-彩妆店是干嘛的| www.js30.com-新彩计划app| www.7960.vip-正好彩票网黑龙江| www.37488.com-极速彩票游戏下载| www.058827.com-彩票极速快三玩法| www.706987.com-体彩河南泳运夺金| www.871349.com-下载双色球彩票| www.kw3.cc-广西快三走势形态图| www.808743.com-体育彩票分析网站| www.674753.com-竞彩专家推荐网站| www.779025.com-福彩3d大花猫二| www.870765.com-中博在线彩票有托吗| www.947600.com-体育彩票发行原则| 网易彩票www.065wy.com| www.fx16.com-彩788-| www.xz01.com-福彩多乐彩走势图| www.096905.com-体彩福彩多彩网| 幸运彩票www.669307.com| www.315680.com-彩虹7号游戏图片| www.075306.com-新快三走势图| www.208789.cc-湖北快三前天走势图| www.445052.com-怎么样才能中彩票| www.560288.com-体彩三d开奖助手| www.027146.com-彩民自创3d选号法| www.125254.com-七乐彩中奖概率最高| www.905027.com-快三一分彩-| www.305328.com-彩71彩票平台| www.57060.com-彩宝宝怎么样| www.626876.com-仁信彩票的网址| www.750203.com-天天爱彩票吧| www.825195.com-七星彩经典梦兆册| www.892032.com-k彩娱乐登录| www.955557.com-彩票挂机方案贴吧| 500彩票www.540877.com| www.uc08.com-怎么做黑彩平台代理| www.314740.com-七彩云南欢乐世界| www.76581.com-女孩梦到彩票号码| www.a40.net-华亿彩票网址| www.63721.com-中国古建筑彩绘价格| www.8886.cc-竞彩中奖多少要交税| www.34pn.com-彩运来注册与登陆| www.755363.com-七星彩专家小凤仙| www.921866.com-青海省快三图| www.59269.cc-福彩三d开奖官网| www.91639.cc-好彩香烟烟悦| www.972028.com-3d福彩彩圣字谜| www.692707.com-网上乐乐彩是真的吗| www.919545.com-黑彩外地服务器| www.ry3.cc-福彩快三心态| www.qs3.cc-吉林市彩票兑奖地址| www.2262.vip-鸿易彩票-| www.048334.com-大无限彩票坑人| www.999919.cc-宇宙彩票套路| www.00pb.com-彩票也疯狂影评| www.5360.cm-淘宝买彩票怎么兑奖| www.046644.com-甘肃福彩加盟电话| www.125298.com-彩票选几个好| www.579181.com-彩票3d字谜太湖| www.658322.com-彩神通代理软件下载| www.730301.com-软件买的彩票靠谱吗| www.750061.com-七星彩预测频道网| www.822914.com-七星彩开奖软件下载| www.898413.com-福利彩票去哪里查| www.969504.com-福彩3d高手贴吧| 500彩票www.303464.com| www.1678.win-高频彩票走势图技巧| www.61gz.com-36o彩票开奖公告| www.3205.vip-鸿发娱乐送88彩金| www.859.net-时时彩七码选号技巧| www.7393.space-色彩搭配的方法| www.46870.com-时时彩下分版网站| www.365135.cc-今期老鼠报彩图| www.983367.com-福利彩票选四走势图| www.485355.com-快8彩票下载安装| www.620342.com-国外彩票业-| www.699011.com-华夏福彩哪里下载| www.tr31.com-宝发彩票-| www.02og.com-世界杯打平了彩票| www.65ll.com-彩票店中奖有提成没| www.311385.com-3d彩报图下载| www.672510.com-足彩预测app| www.740618.com-澳博彩票下载安装| www.819872.com-上海体彩客服电话| www.880224.com-喜乐彩游戏规| www.933693.com-时时彩真的能赢钱吗| www.977569.com-世界杯足彩怎么买| www.cai001.com-内蒙古快三走势图| www.fq09.com-体彩app下载| www.316190.com-体彩店销售额| www.ex07.com-快三是坑人的彩票| www.6yq.com-买彩票那么多年| www.604.bid-tt彩票网下载安装| www.7586.top-彩票分析软件怎么样| www.58337.com-国彩网可以挣钱吗| www.134337.com-好彩烟哪里有卖| www.320884.com-www.皇都彩票| www.qj07.com-好彩1玩法介绍| www.330780.com-彩票试玩app| www.8160.biz-最新吹吹七星彩| www.90116.com-七彩网络平台注册| www.085028.com-深圳鑫源彩彩票| www.184557.com-福彩快3助手| www.677741.com-各种彩票开奖查询| www.873511.com-足彩篮彩计划| 彩票大家乐www.21202s.com| www.122456.com-有没有微信时时彩群| www.607565.com-大发时时彩玩得技巧| www.751634.com-彩票怎样买容易中奖| www.820038.com-彩票种大奖到那领取| www.887359.com-发彩快三计划| www.953584.com-贵烟好彩牌香烟| www.999666.com-福彩网是不是骗人的| www.ei42.com-河南彩钢围挡定做| www.ub41.com-彩票名词花色| www.452285.com-彩票生意好做吗| www.531746.com-老彩民买吗赢钱方法| www.623296.com-下彩彩票网页版| www.459308.com-中国济宁福利彩票网| www.616990.com-彩票中奖怎样兑奖| www.725971.com-福利彩票中奖说明| www.1711.com-金手指彩票指南| www.254145.com-58彩票网页版| www.715958.com-中彩时时彩娱乐软件| www.227900.com-立彩彩票-| www.2969.top-福彩有中奖的吗| www.39382.cc-彩牛彩票网-| www.077479.com-算局七星彩奖表软件| www.233820.com-彩票直组任三啥意思| www.351592.com-一个月180买彩票| www.dw13.com-亿彩彩票官网网址| www.613177.com-宁夏省福彩中心| www.973349.com-彩虹岛职业-| www.cai4266.com甘肃快三走势图百度| www.881755.com-福彩3d直选遗漏号|