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天

知道了
亚洲28 www.973823.com-福彩双色球蓝球定胆| www.889.in-网上时时彩违法吗| www.52409.cc-亚博彩票平台网址| www.375836.com-手机版百乐彩怎么玩| www.726551.com-如何开通手机买彩票| www.900319.com-陕西11选五爱彩乐| 500彩票www.649677.com| www.254124.com-安卓版58彩票| www.444815.com-金手指彩票预测| www.168718.com-北京快三开奖预测| www.556334.com-106购彩平台| www.356678.com-宁波福彩网-| www.626925.com-518彩票进不去| www.165663.com-1068彩票网注册| www.2569.pw-买彩票那个平台好| www.823818.com-三彩品牌折扣店| www.893621.com-博奥彩票软件| www.966775.com-大连体彩11选5| www.cai8789.com吉林快三开将结果| www.607531.com-南昌福利彩票店| www.796335.com-尊彩网是不是假的| www.963256.com-彩钢瓦价格-| www.gu67.com-百盈彩票有人赢了没| www.264861.com-中国福彩中心在哪里| www.250735.com-手机版分分彩票| www.892308.com-福彩3d大数据软件| www.is2.cc-快三网站平台官网娱| www.wo90.com-好彩0567官网| www.856279.com-七星彩在线模拟摇奖| www.708322.com-大发时时彩我的| www.824525.com-我怎么买彩票| www.903731.com-官方9万彩票安卓版| www.987102.com-彩迷网怎么样| www.6qp.cc-员工年后领彩票中奖| www.639519.com-湖北福彩快3走热| www.289657.com-106官方彩票| www.3nh.com-彩塘不锈钢批发市场| www.761977.com-福彩端怎么玩| www.092682.com-福健福彩-| www.274627.com-有没有带着玩快三的| www.2200.online福利彩票快乐三分| www.rf67.com-168福彩-| www.8579.loan-彩波有纪百度百科| www.622018.com-云彩彩票app| www.790479.com-2019好彩一推荐| www.950786.com-山东彩票齐鲁风采| www.if95.com-福彩3d杀尾跨大全| www.89gk.com-博彩app合法吗| www.37660.com-登录凤翔彩票| www.118096.com-体育彩票和尾值| www.207792.com-五省快三-| www.553930.com-足球胜负彩擂台| www.626328.com-珠江彩票软件| www.713612.com-彩神争8是什么软件| www.789361.com-彩妆加盟店-| www.866040.com-5星彩票-| www.933379.com-500彩app-| www.984453.com-下载彩运网-| www.bp05.com-快三选号助手| www.ti29.com-k彩民福地-| www.023612.com-a23彩票app-| www.097786.com-阳逻福利彩票转让| www.155972.com-01福彩是什么| www.91569.cc-好彩多少钱一包| www.160601.com-福彩3d对子-| www.768048.com-彩票资讯双色球| www.867770.com-七星彩现场开奖直播| www.937386.com-彩福大厦最高是几楼| www.13381.com-足彩复式注数| www.024706.com-竞彩双平什么意思| www.27.biz-时时彩赢了提现骗局| www.2402.top-体彩彩票开奖记录| www.595880.com-彩票店中奖横幅咋写| www.716876.com-麋鹿彩铅画-| www.828689.com-盗窃彩票中了大奖| www.995794.com-竞彩公式-| www.pe94.com-众彩网手机版下载| www.567793.com-万福彩票77-| www.61010.com-保定清苑彩票中奖| www.002888.cc-彩霸王图库彩图| www.855632.com-七乐彩能买七个号码| www.6749.cc-六福彩票是真的吗| www.823210.com-安微福彩-| www.933567.com-20分钟开奖的彩票| www.88660.cc-怎样查彩票开奖结果| www.133297.com-批发彩钢围挡| www.793.mobi-易彩乐福利彩票| www.012802.com-七星彩几点开奖直播| www.lj95.com-豪彩app-| www.153.org-彩虹天堂周杰伦| www.33319.cc-有三分钟时时彩的吗| www.110315.com-福利公益彩票全天彩| www.279972.com-足球彩票500| www.378408.com-幸运彩45-| www.3350.vip-人人中彩票世界杯版| www.19466.cc-国乐彩怎么下载| www.73448.com-牛彩藏图正版藏机图| www.022205.com-河南福彩幸运彩走势| www.084408.com-动物总动员彩票害人| www.172173.com-双色球快三开奖结果| www.59922.com-博彩头头是黑网吗| www.60fp.com-易购网彩票-| www.286861.com-时时彩算号器安卓| www.131876.com-潍坊彩礼钱的价格表| www.362665.com-彩蕴防过敏染发膏| www.713769.com-彩票纸大小-| www.791430.com-3d福彩图迷-| www.872085.com-q彩网怎么登录| www.j12.com-福利彩票3d九宫图| www.173117.com-快三代理中心| www.281736.com-彩票指南电子免费版| www.381694.com-谁有彩票交流群群号| www.630471.com-wxing彩票-| www.710257.com-用微信让彩票店代买| www.813233.com-微信上玩彩票的女孩| www.902889.com-全国彩-| www.3783.in-新版福彩3d八卦图| www.00751.com-乐彩论谈手机版| www.020495.com-查体育彩票中奖号码| www.909372.com-快三福彩福建| www.974974.com-055kcc福彩网| www.cp0177.com-下载快三预测软件| www.pj47.cc-彩票平刷稳定方案| www.930394.com-体彩双色球怎么玩| www.897153.com-盈发彩票app下载| www.956245.com-彩票全国联销| 中彩网www.81233g.com| www.930835.com-体彩有什么玩法| www.cai3931.com上海快三是什么| www.qs88.cc-甘肃体彩app| www.3182.top-体彩世界杯竞猜倍率| www.620762.com-如意彩票开奖网| www.598186.com-福利彩票复投计算| www.357088.com-彩铅手绘美食| www.436018.com-鹤壁体彩网点申请| www.539371.com-釉中彩餐具怎么样| www.32130.cc-360网上购彩大厅| www.8075.org-中国水彩画大师排名| www.966841.com-广西褔利彩票官网| www.cp6678.com-网上快三是合法的吗| www.545062.com-双色球颖彩-| www.649953.com-澳门博彩业收入占比| www.726018.com-银河彩票平台| www.801285.com-彩票充值送彩金平台| www.882933.com-鸿彩网直播app| www.21504.cc-彩票代玩账号微信| www.1205.com-环彩彩票下载安装| www.658600.com-中乐彩注册登录| www.nj76.com-竞彩网开奖-| www.69383.com-福彩快三守号技巧| www.329975.com-微信群北京快三大小| www.434004.com-关彩唏种子-| 百姓彩票www.bxcp3.com| www.688957.com-博易彩票源码| www.3301.website彩票走势图教程| www.077586.com-乐彩开奖-| www.727800.com-福彩双色球最高中奖| www.cp435.com-极速快三app下载| www.810641.com-泰安体彩中心地址| www.869783.com-唯彩会官网-| www.916443.com-天下一第彩票开奖| www.963251.com-彩钢板多少钱一平米| 百姓彩票www.bxcp3.com| www.bl99.cc-时时中彩票官网平台|