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.051364.com-福彩3d购买app| www.720540.com-七星彩星座幸运选号| www.914937.com-鸿运彩下载-| www.370271.com-小康彩票是真是假| www.60908.com-石家庄体彩中心在哪| www.456000.com-3d彩报第二版| www.570939.com-大彩鲸中奖宝典| www.712504.com-万客彩票-| www.807258.com-足球彩票过关怎么玩| www.893268.com-手机彩票过滤大师| www.965581.com-快三234下期预测| www.wr1.com-众彩网牛材网| www.857795.com-盈彩网是什么软件| www.943004.com-重庆体彩兑奖中心| www.997775.com-开心网七星彩论芸| www.gw86.com-爱彩app彩票软件| www.24jj.com-手机彩膜壁纸| www.176.in-彩客让球胜平| www.573448.com-怎样绘制彩票k线图| www.rd2.com-500彩1分快3| www.d64.cc-看体彩排五开奖号| www.54cd.com-彩票刮刮乐纠纷案例| www.543863.com-福彩26期开奖号码| www.17162.com-8618彩票靠谱吗| www.505194.com-973彩票-| www.nx75.com-幸运快三网赚| www.oq93.com-大优彩票网站| www.12ic.com-多赢大发快三app| www.505647.com-长沙市福利彩票公司| www.588008.com-天天红单彩票app| www.706970.com-微信上能买彩票么| www.230706.com-福建福彩快3结果| www.055727.com-彩票缩水组号技巧| www.1169.pw-彩票语录图-| www.752718.com-彩牛网免费资料大全| www.182835.com-快三一直赚钱| www.895081.com-爱投彩票兼职| www.132836.com-世界杯在哪买彩票| www.co27.com-500购彩大发快三| www.384512.com-第9彩票-| www.977401.com-掌上彩票安全吗| www.ax47.com-彩票的各种玩法| www.vz66.com-汉中福彩中心在哪| www.873358.com-快三大小单双的危害| 500彩票www.511073.com| www.lf20.com-彩19-| www.e79.top-彩票30选7-| www.054699.com-体彩有哪些高频彩| www.692851.com-足彩即时比分彩客| www.800994.com-福彩牛彩图迷总汇| www.874783.com-福利彩票数字| www.964317.com-富人人彩票下载| www.554380.com-网络彩票宣传语| www.677843.com-彩票装修-| www.788833.com-足彩app有哪些| www.888864.cc-彩票的返奖面仿真| www.983299.com-足彩app下载| www.es71.com-彩神2是真的吗| www.yq94.com-快三单式怎么算中奖| www.28fq.com-腾讯彩票娱乐有托| www.916.mobi-彩票道术-| www.394988.com-七彩铃兰花语| www.520945.com-体彩3d试机号| www.325308.com-苹果彩票线路导航| www.89ka.com-守信彩票导师| www.8435.cm-体彩排列三3码遗漏| www.507250.com-乐彩网大乐透净版| www.0108.tv-响亮的竞彩名字| www.7323.biz-彩虹六号透视脚本| www.17761.com-信用平台彩票下载| www.k45.bid-北京快三计划微信群| www.2567.pw-中信彩票输了一万五| www.09759.com-专业玩彩视频双色球| www.892751.com-彩c99-| www.986767.com-竟彩蓝球-| www.bl11.com-神州彩票可信吗| www.wl68.cc-好123手机彩票| www.bp54.com-在哪里下载彩票软件| www.221282.com-709彩票app-| www.339558.com-石家庄福利彩票转让| www.111748.com-彩票注册送15| www.46034.com-时时彩网页火鸟计划| www.891.win-爱淘彩票官方网站| www.391365.com-全民星彩app| www.611916.com-乐彩论谈手机板| www.905500.com-吉利彩票倒闭| www.982043.com-福利彩票官方投注器| www.aq77.com-遵义体福彩店转让| www.947855.com-台湾彩票开奖| www.645027.com-35彩票网页版| www.353915.com-贵州11选5彩经网| www.035.loan-遇见彩虹的说说| www.2306.vip-彩票打票员好学吗| www.456086.com-8828彩票输钱| www.561478.com-网络彩票赌博安全吗| www.630916.com-胜负彩竞猜对象| www.518268.com-炫彩铃声ios| www.609287.com-彩票采集教程| www.680772.com-白岩松说彩票视频| www.767455.com-福彩74期-| www.830123.com-福利彩票3d幸运号| www.890081.com-彩票平台试玩| www.953464.com-竞彩360直播比分| 爱彩www.013ac.com| www.bn49.com-易彩网官方-| www.122559.com-彩世界手机版apk| www.69282.com-派彩电子走势图安装| www.128432.com-最具权威的彩票网站| www.203148.com-彩票走势规律讲解| www.260390.com-彩至尊平台官网| www.319208.com-局王七星彩下载| www.372796.com-7彩手机版app| www.445060.com-下彩彩-| www.521040.com-时时彩胆码计划| www.596776.com-全民彩票计划分析| www.5836.cn-云顶国际博彩怎么样| www.63386.com-足彩19042难度| www.031772.com-七星彩历史号码表| www.116838.com-网上购彩票平台| www.281939.com-新浪体彩福彩| www.375353.com-中彩网真的赚钱吗| www.513939.com-竞彩足球彩果查询| www.732332.com-开封杞县彩礼价目表| www.815370.com-河北彩票领奖地址| www.896269.com-2017彩票合买群| www.977633.com-宝马彩票手机版下载| www.9066.cc-彩的五笔打法| www.62fk.com-福彩3d高手杀两码| www.702010.cc-老彩民足彩篮彩| www.859288.com-七星彩小说下载| www.936211.com-重庆五分彩开奖结果| www.984330.com-下载吉林快三助手| www.53300.com-分分彩计划工具| www.004369.com-彩票延迟开奖| www.108079.com-彩票余额修改神器| www.236657.com-竞彩网足球-| www.213241.com-摇彩票-| www.478234.com-综艺福彩是真的吗| www.612209.com-快三必赢-| www.700051.cc-重庆时时彩计划网页| www.856938.com-如何开彩票站| www.958405.com-10选5彩票怎么骗| www.cp3600.com-福彩店快三-| www.u61.cn-购彩票助手软件| www.243588.com-搜狗彩票安全吗| www.365512.cc-时时彩怎么刷返水| www.5988.online大同彩票网能提现吗| www.73055.com-快三二同号| www.109294.com-红牛福利彩票| www.188177.cc-安徽快三计划网| www.287045.com-彩票数据接口| www.002213.com-彩票复式中奖计算器| www.3820.vip-新跑狗彩图-| www.858519.com-88期福彩开奖结果| www.63014.com-158彩票官网| www.064901.com-彩票平台注册送财金| www.183119.com-腾讯快三官网| www.260528.com-微信彩票算赌博吗| www.357752.cc-员工年会彩票| www.444558.com-体育彩票市场竞彩猫| www.584687.com-国民彩票是正规的吗| www.678435.com-中国足彩比分完整| www.822627.com-体彩算不算加时| www.920458.com-彩票摇奖模拟器视频|