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.982779.com-重庆福彩网官方首页| www.88494.com-九号彩票app| www.75976.cc-七号彩票注册邀请码| www.100092.com-极速3d彩票贴吧| www.789289.com-彩妆店加盟-| www.298927.com-彩神争霸8吉林| www.518318.com-七星彩五行走势图表| www.258507.com-310足彩-| www.519505.com-竞彩工作室-| www.649301.com-彩博网址-| www.054416.com-微彩看球-| www.788.cm-秦时明月彩虹| www.66490.cc-我要买彩票排列三| www.073261.com-穷人买彩票希望| www.166066.com-旺彩双色球预测靠谱| www.920373.com-玩彩票赚钱注册账号| 中国福利彩票www.08588y.com| www.138549.com-百变时时彩计划网页| www.98122.cc-彩31彩票下载安装| www.hc79.com-彩788app-| www.144861.com-糖果派对送彩金26| www.89920.com-第一彩票网安全吗| www.521151.com-福星彩票福星高照| www.404798.com-19040彩票开奖| www.547857.com-开心七星彩网图版区| www.191132.com-内蒙古快三二码遗漏| www.831030.com-手机板新彩网| www.283750.com-福彩开奖直播现场| www.372367.com-贵宾网天彩票| www.966039.com-今日福彩中奖号码| www.cp8355.com-福彩快三开奖结果| www.381077.com-七乐彩什么时间开奖| www.255269.com-中国彩票送彩金| www.016013.com-家彩开奖app| www.202978.com-湖北福彩网30选5| www.483600.com-黑彩刘雪龙完整视频| www.2028.net-彩虹六号进游戏蓝屏| www.012838.com-海口彩票早版互换区| www.5464.cn-彩38线路一-| www.653667.com-中国体育彩官网| www.878807.com-竞彩足球千万大奖| www.998828.com-香港福彩票开奖结果| www.yf14.com-彩票站的惊天秘密| www.684.tv-极速75时时彩| www.00303.com-香港百姓彩坛论坛| www.88660.cc-怎样查彩票开奖结果| www.2144.me-全民彩票能提现吗| www.67488.cc-彩票与投资-| www.018729.com-贵州快三图表| www.191080.com-三分快三开奖| www.773254.com-探探里带你买彩票| www.711014.com-app刷彩票-| www.893554.com-犀牛彩票邀请码| 大赢家彩票网www.54400d.com| www.x98.net-彩运快三专区| www.607813.com-韩国哪里可以买彩票| www.714698.com-景德镇体彩中心招聘| www.795818.com-全彩网断组-| www.904940.com-竞彩足球彩票开奖| 天天彩票www.1035r.com| www.576543.com-彩02彩票平台正规| www.685503.com-贵宾中彩站-| www.776280.com-火箭彩票安卓版| www.901317.com-彩票的常识-| www.1ql.com-彩票理财确定能赚吗| www.211427.com-河北省快三走勢| www.293592.com-南京福彩-| www.363413.com-儿童重彩画-| www.608027.com-格莱贝彩金手链价格| www.703338.com-正版福利彩票| www.796842.com-足彩任选九-| www.895684.com-多盈彩票网手机版| www.989103.com-陕西福彩新规| www.qz45.com-内蒙爱彩乐-| www.309902.com-体彩中心张弛资料| www.457358.com-买彩票科学方法| www.233791.com-北京快三开奖和值| www.515659.com-彩票买中了那里对钱| www.65404.com-青海省体彩兑奖中心| www.083634.com-吉彩彩票是什么东西| www.459166.com-快三开奖走线图| www.576949.com-兰州彩票店移机| www.666636.com-彩票书哪个最好看| www.747205.com-云购彩8-| www.815968.com-快三怎么买大小| www.888814.com-网易彩票电脑版杀号| www.994910.com-中福快三软件| www.vi1.cc-南洋彩上期开奖结果| www.xm73.com-派彩助手北京快3| www.30nv.com-彩虹世界破解版下载| www.701064.com-彩票通资讯完整版| www.791622.com-深圳福彩免费车票| www.869825.com-怎么看彩票开奖视频| www.971166.com-彩票如何选号规律| www.cp6569.com-6+1体彩-| www.so03.com-中体彩网开奖| www.188449.com-福彩安徽快三| www.267710.com-中国体彩网官网客服| www.355757.com-常州体彩中心招聘| www.443221.com-家彩网胆码天中图库| www.536851.com-福彩3d唐龙点评| www.670489.com-体彩稿件-| www.886335.com-体彩排列三杀码高手| www.976349.com-最近河南彩票中奖| www.lb8.com-兰州体彩十一选五| www.32134.com-彩钢板围挡报价| www.658519.com-91彩票计划方案| www.356058.com-等差数列与彩票| www.692897.com-3d福彩和值表| www.819918.com-福彩福彩3d-| www.257121.com-快三权威平台| www.035435.com-幸运彩票网页计划| www.175455.com-江苏福彩快3遗漏| www.250860.com-中福网彩票app| www.385406.com-吉祥8彩票网址| www.2892.top-腾讯分分彩龙虎技巧| www.254070.com-浙江福彩生肖6十1| www.425657.com-黑黄金8彩票| www.857390.com-利搏彩票是真是假| www.922360.com-全国各地彩礼价格表| www.979236.com-好彩混合型-| www.go99.cc-河南彩色道路| www.yp95.com-在韩国中彩票| www.14so.com-淮南福彩中大奖| www.049284.com-中国体彩报体彩赢刊| www.jc34.com-彩票306安卓| www.069561.com-199期彩吧图| www.95986.cc-体彩专管员待遇| www.545321.com-15选5走势图福彩| www.71140.com-体育彩票考试知识| www.071556.com-彩票app白菜网| www.456408.com-官方7k彩-| www.928334.com-中彩网注册不了| www.ua75.com-彩票推销术语| www.629771.com-七乐彩守号选号| www.783463.com-福彩三b今日迷| www.033244.com-七乐彩历史中奖号码| www.079003.com-海南七星彩杀码平台| www.793086.com-网络彩票输都是贪心| www.691797.com-彩票报纸大全| www.323289.com-百度乐彩app| www.653259.com-江西快三预测一定牛| www.hc34.com-8彩app-| www.901434.com-五福彩是不是骗局| www.964398.com-竞彩串关奖金计算器| 幸运彩票网www.33598k.com| www.ix60.com-全民中彩票打不开| www.051579.com-上海彩票网-| www.120650.com-pc蛋蛋彩票-| www.732156.com-春秋彩票平台| www.807182.com-彩票带单老师可靠么| www.872994.com-彩之星首页-| www.935312.com-大牌彩票ios| www.994544.com-重庆试试彩开奖结果| www.ax28.com-甘肃快三形态一定牛| www.758062.com-云顶彩票-| www.603201.com-彩讯pc28刮刮乐| www.665760.com-七星彩票19041| www.720911.com-76cp彩票-| www.783433.com-彩38彩票领导者| www.838469.com-竞彩输钱害人例子| www.558668.com-彩博888会员资料| www.701034.com-优信彩票网站首页| www.807343.com-什么彩票能中上亿|