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.47314.com-山东德州快三| www.838074.com-五百竞彩网-| www.949607.com-讯盈彩票邀请码| 鑫亿彩www.196039.com| www.622366.com-彩票刮刮卡印刷厂家| www.016903.com-福彩3d计算器组选| www.444100.cc-福彩3d和跨-| www.781617.com-印尼时时彩开奖号码| www.871435.com-湖北省3d福利彩票| www.946706.com-福建体彩聊天室网址| GO彩www.dao90.com| www.jm45.com-广东快三自己控制| www.410187.com-胜负彩复式表| www.581379.com-快三黑彩玩法介绍| www.677836.com-华彩传销-| www.777724.cc-我要中彩票平台| www.874519.com-福彩20选8玩法| www.953908.com-大神彩票-| www.jy5.com-广西快三彩票投注| www.121057.com-大发快三口诀表| www.993353.com-足彩竞猜方法| www.501955.com-大佬彩票网址多少| www.597966.com-伊吗图福彩投注站| www.692058.com-双色球机选彩乐乐| www.780538.com-今日篮彩推荐| www.874179.com-彩票app无法提现| www.958916.com-600w彩票app| www.bu5.com-好彩一生肖数字表| www.a11.website体彩大乐透兑奖结果| www.538478.com-福彩3d大花虎图库| www.967343.com-河北时时彩11选五| www.474015.com-彩仙-| www.585720.com-红旗彩票开奖网址| www.hs00.com-中福快三骗局| www.w44.org-体彩历届开奖| www.338888.cc-打开重庆时时彩网站| www.9028.vip-足彩暂停销售| www.69310.com-竞彩推荐新浪| www.695082.com-竞彩投注比例比例| www.801837.com-吉林省几个福彩中心| www.877888.cc-彩票2元网3d走势| www.727203.com-有没有招彩票代玩的| www.850316.com-腾讯分分彩近五百期| www.963972.com-彩乐乐3d杀号| www.cai0707.com江苏快三一定牛| www.s87.com-柳州自助投注彩票站| www.222685.com-时时彩反倍投绝对赚| www.11337.com-vv500万彩票| www.d17.net-彩中彩骗局-| www.rn43.com-快三三不同全包| www.47vl.com-彩票技术书-| www.2814.win-西安有转让的彩票店| www.591745.com-彩票中奖怎么花| www.065545.com-彩票黑平台怎么赚钱| www.216570.com-河北保定快三开奖| www.299546.com-中福彩票网址是多少| www.17735.com-爱心彩广西快3| www.tc50.com-彩票平台排行| www.966718.com-宝马彩票软件| www.cc56.com-大发快三怎么做代理| www.wj36.com-大发时时彩专业计划| www.90np.com-彩票开奖机器原理| www.923728.com-快频彩票软件| www.984439.com-彩运8app骗局| www.dd35.com-江苏快三计划app| www.893179.com-屠龙勇士潘森炫彩| www.963387.com-七乐彩中3-| 华彩www.71399y.com| www.331517.com-七乐彩票大发主页| www.647373.com-胜负彩论坛-| www.488424.com-俩元彩票走势图| www.969227.com-谦喜彩票网址| www.337500.com-天天盈球竞彩大势| www.1024.cc-体彩中奖概率| www.8528.in-网购时时彩-| www.771606.com-时时彩送彩金36| www.ba0.com-湖北快三分布图| www.0808.link-网上不能买足彩| www.630071.com-彩票秘诀-| www.tc05.cc-彩票微信网名| www.2317.wang-千万国际彩票| www.63014.com-158彩票官网| www.657989.com-下载分分彩票| www.262360.com-福彩3d机选一注| www.522430.com-腾讯分分彩西瓜计划| www.589073.com-开心七星彩精彩论坛| www.662543.com-重庆彩票兑奖中心| www.726876.com-手机上买彩票| www.801351.com-福利彩票无人售票机| www.gf42.com-鸿运5分彩走势图| www.139423.com-快三怎么能赚钱最快| www.42la.com-年2鱼玩彩猜一字| www.291725.com-彩鸿彩票骗局| www.97uv.com-有没有职业彩票人| www.7en.com-彩票怎么才知道中奖| www.266604.com-时时彩遗漏怎么追| www.399508.com-彩47是官方网站吗| www.515563.com-彩票输惨-| www.636763.com-带彩虹的儿歌| www.825776.com-原彩-| www.939781.com-彩98彩票官网| www.dq91.com-快三全国统一吗| www.73mw.com-九九彩票真假| www.872379.com-福彩助手app| www.943072.com-58彩票网站是多少| www.994078.com-彩票分析大师下载| www.ao31.com-贵州省福彩中心电话| www.sx02.com-澳门六星彩开奖网站| www.286847.com-福彩3d一定牛预测| www.922914.com-体彩扑克3奖金| www.978447.com-彩色铝板-| 大赢家彩票平台www.860705.com| www.40075.com-金六福彩票-| www.16283.com-彩票5是骗人的吗| www.090043.com-凤彩网专家app| www.936288.com-聚宝盆最大手机彩票| www.bh59.com-重庆5分彩骗局| www.3230.com-齐中网彩天下| www.357192.com-中了彩票离婚| www.345988.com-宋代红绿彩瓷器鉴定| www.195833.com-走吉林快三吉林快三| www.x98.net-彩运快三专区| www.604460.com-01彩票的官方网址| www.231957.com-中彩网首页官网| www.053557.com-世界杯足彩买不了了| www.254722.com-正规足球竞彩app| www.576992.com-天天彩票维护时间表| www.717077.com-彩铅渐变法-| www.790780.com-大乐透彩票模拟器| www.109021.com-七彩鱼最佳水温| www.715488.com-足球竞彩彩票下载| www.329110.com-青海体彩网-| www.826978.com-怎样才能戒彩票| www.914984.com-排列五星彩开奖结果| www.972095.com-19049足彩大势| www.jx13.com-吉林福利彩票快三| www.2387.xyz-湖北福彩玩法| www.758013.com-快三和值大小| www.795601.com-江苏福彩三d开奖| www.898808.com-广东体育彩票开奖| www.522388.com-a9彩骗局-| www.634664.com-七彩音符里的音乐| www.789730.com-710竞彩平台| www.965361.com-uu彩票注册-| www.hq17.com-体彩新浪彩票| www.744764.com-最新彩票管理条例| www.119336.com-玩彩票安卓版下载| www.276821.com-福彩快乐十分下载| www.420226.com-彩票直销-| www.578998.com-137彩票开奘| www.723454.com-彩乃奈奈百度云| www.961141.com-内蒙体彩中心地址| www.lq45.com-如何在中彩网买彩票| www.60167.com-网易彩票网真实吗| www.809199.com-彩票的中奖概率多少| www.023461.com-彩票刷流水方案| www.717920.com-江苏快三手机app| 500彩票网www.97655c.com| www.vf09.com-甘肃快三今天| www.928005.com-快三预测湖北肖立刚| www.cj65.com-一分快三开奖网| www.1277.vip-外蒙快三群-| www.68815.com-爱看彩彩票论坛| www.147159.com-彩先知彩票机|