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.098896.com-传统彩灯制作| www.898360.com-hk百彩网开奖结果| 500万彩票www.500cd.com| www.9558.xyz-南粤风彩好釆3| www.95is.cc-多彩投有收益了吗| www.6639.top-腾讯分分彩五码| www.80pz.cc-天干地支与彩票| www.4782.com-558彩-| www.8277.com-久久彩票苹果版| www.155711.com-体育彩票预测| www.139120.com-最好彩票软件| www.229772.com-上海福彩网官网查询| www.901231.com-河北燕赵福彩排列五| www.776934.com-彩宝宝网页版| www.8447.cc-新星彩票app| www.46764.com-时时彩五星二码计划| www.028095.com-万豪国际彩票| www.622886.com-2010中奖的彩票| www.024987.com-新浪彩票频道在哪里| www.p85.org-9万彩票官网| www.262098.com-手机福利彩票| www.661462.com-今天三d彩报图| www.417795.com-红神体彩网c310| www.77lg.com-乐彩网摘图谜总汇| www.052206.com-店之宝彩票-| www.234144.com-合肥市体彩兑奖中心| www.173711.com-内蒙快三昨天走势图| www.614768.com-pk彩票软件手机版| www.798633.com-极速时时彩基本走势| www.977461.com-如何开彩妆店| www.142.cm-彩虹屁夸女朋友| www.16216.com-福彩双色球直播频道| www.853310.com-立彩彩票苹果| www.23268.com-蜂鸟彩票-| www.802758.com-彩票在手机上能买吗| www.rc3.cc-一分快三规律破解| www.93975.com-足彩最新欧赔| www.170256.com-快三开奖上海| www.872347.com-体彩跟福彩哪个更假| www.cp6138.com-福彩app-| www.089037.com-彩名堂计划最新版| www.4634.xyz-体彩买双色球| www.yp93.com-韩国买彩票地点| www.74vn.com-长沙中彩集团| www.515473.com-最近的彩票事件| www.590540.com-七星彩图谜-| www.702951.com-福彩3d频道-| www.822669.com-打开彩-| www.695010.com-中国足球竞彩比例| www.804949.com-3d彩票选号技巧| www.896376.com-博彩快三对打套利| E彩堂www.9818d.cc| www.pq98.com-三彩折扣店-| www.41hg.com-体育彩票有节假日吗| www.cp9332.com-分分中彩app| www.962694.com-富贵彩软件-| www.512002.com-福彩3d奖号码| www.010655.com-延边快三开奖走势图| www.527496.com-百彩钱包app| www.6777.tv-吉林十分快三| www.833933.com-二四天天开彩| www.953521.com-港版红好彩-| 8号彩票www.60108q.com| www.046080.com-51彩票是正规的| www.154592.com-易彩票怎么玩能挣钱| www.249941.com-彩运宝app-| www.369522.com-旺旺彩票官网登陆| www.628060.com-广东体彩下载软件| www.136983.com-七彩含义-| www.259970.com-京东快三彩票是真的| www.009510.com-彩票平台首页| www.129130.com-腾龙彩票-| www.5408.xyz-彩票行业什么样| www.72483.com-彩票用什么数学| www.092262.com-河南彩礼贵吗| www.lu75.com-时时彩开奖视频| www.127549.com-彩虹六号骚话王| www.66uj.com-拉菲时时彩登录| www.48sj.com-体彩排五专家推荐号| www.949542.com-盈彩是真是假| www.572631.com-足彩任九胆拖加复式| www.32106.cc-易彩堂app怎么样| www.5nc.com-足彩奖金多少要交税| www.240427.com-彩铅颜色搭配口诀| www.638277.com-色彩静物构图| www.759277.com-福彩三d图-| www.910518.com-彩93app下载| www.af11.com-手机彩票网123| www.56065.com-7位数的彩票有哪些| www.72ro.com-今晚七乐彩开奖结杲| www.2490.top-人工计划时时彩| www.8940.cm-体彩七星彩时间| www.211920.com-500购彩大发快三| www.fi52.com-福彩3d10分钟| www.337.cm-下载app趣彩彩票| www.5478.net-喜欢买彩票的男人| www.196335.com-竞彩8442万大奖| www.272377.com-福彩3d和直表| www.66748.cc-最近彩票站-| www.780865.com-日彩网可靠吗| www.337381.com-七彩星奖开奖结果| www.224820.com-河南快三购买技巧| www.82892.cc-体彩软件app| www.49bl.com-七彩朱蕉-| www.cp6786.com-江苏快三预测一定牛| www.055140.com-彩色的中国-| www.69646.com-博彩系统搭建平台| www.349955.com-北京福彩哪里兑奖| www.456377.com-名彩堂下载-| www.581358.com-福彩哪个app靠谱| www.746796.com-私彩案-| www.816895.com-福利彩票中奖征兆| www.887244.com-快乐彩任选四怎么玩| www.954714.com-博大彩票平台| 乐彩网www.4189d.com| www.38755.cc-福彩3d专家号| www.292476.com-时时彩组六单式号码| www.939077.com-58彩票换网站了| www.991452.com-网赌快三输了怎么办| www.ao35.com-贵州省福彩兑奖地址| www.ph87.com-海南快三走势图表| www.031571.com-阿里彩票是真的吗| www.025845.com-众购彩票网官方| www.28jh.com-意彩平台app| www.781.space-香港中特彩民之家| www.092920.com-高频彩票的原理| www.32847.com-三d走势彩宝网| www.492244.com-百乐彩票登录| www.586329.com-4个grand彩金| www.839.in-玩彩票输光积蓄| www.141939.com-3d开奖结果彩宝网| www.6zq.com-彩票中奖608| www.872487.com-腾讯天天彩票| www.401405.com-下载佰萬彩票| www.61355.com-网彩投诉-| www.823608.com-彩钢卷板厂家| www.929672.com-七星彩简单公式| www.327166.com-福彩3d彩吧图谜| www.83138.cc-福彩3d开始坑人了| www.367378.com-足彩胜负彩姜山| www.850661.com-315彩票网-| www.936121.com-五星中彩票-| www.sd45.com-福彩三d中心开机号| www.3119.pw-神算子图片七星彩| www.8654.com-体彩排列三出奖结果| www.39763.cc-这期七星彩出奖结果| www.85017.com-3d彩圣字迷-| www.033842.com-乐彩网论坛手机版| www.092988.com-体彩天下平台正规吗| www.073534.com-体彩彩吧开机号| www.633222.com-希腊5分彩网址| www.a14.biz-新浪爱彩软件| www.910721.com-足球彩票胜负14| www.968904.com-彩金价格2018| www.cp422.com-极速快三怎么玩稳赚| www.310616.com-奇门测彩票-| www.438608.com-直播开七星彩现场| www.543046.com-彩尊登陆网址| www.621111.com-彩票加奖漏洞| www.735999.com-新彩吧试机号开机号| www.856579.com-彩票开奖500| www.914314.com-优信彩神-| www.970310.com-七彩球中奖-| www.cv29.com-吉林快三分析软件|