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.8031.vip-十字彩网址多少| www.62zc.com-多乐彩直三五十倍| www.788967.com-孕妇彩妆-| www.8614.loan-创彩电视排第几| www.70669.com-欢迎一品彩票网| www.152159.com-网络彩票真假| www.304822.com-98彩票app-| www.393873.com-竞彩对阵球队身价| www.553966.com-宝马彩票熊猫计划| www.661324.com-体彩三十一选七走势| www.750815.com-天天彩正规的吗| www.904017.com-d8彩票下载安装| 大玩家彩票www.1dwj.com| www.610.in-彩88官网下载| www.666411.com-山东福彩怎么兑奖| www.840940.com-彩妆加盟店招商| www.939967.com-彩吧图谜第2版3d| www.wm9.com-体育彩票开奖走势图| www.g13.in-双色彩票中奖规则| www.251.red-重庆时时彩合买| www.397774.com-中国福彩10选5| www.533456.com-七星彩中奖彩民| www.213770.com-青海电子快三走势图| www.365298.com-彩票平台菜鸟| www.492029.com-玖玖彩票网是真的吗| www.569230.com-福彩中心怎么改| www.326130.com-c8万彩吧cn六彩| www.820215.com-彩票厅怎么赚钱| www.276250.com-大发快三怎么刷反水| www.376538.com-3d福彩怪字-| www.496302.com-体彩足球怎么买| www.589802.com-大乐透凤彩网专家| www.692589.com-积分换彩票-| www.800123.com-开彩妆加盟店排行榜| www.922400.com-竞彩分析师招生| www.988047.com-仲彩网站-| www.fl99.com-手机体彩-| www.03jn.com-华人福星彩网站| www.659438.com-利彩安全吗-| www.874342.com-快三有人控制| www.968888.com-彩风暴金3-| www.cai7896.com幸运快三口诀| www.6555.vip-久久发彩票靠谱吗| www.00uz.com-彩票少一个角| www.910598.com-优乐彩app-| www.984744.com-福彩双色球选号公式| www.il05.com-中国彩票下载安装| www.8524.shop-中奖福利彩票号码| www.717491.com-彩铅拓印画-| www.822999.com-彩票凤凰计划| www.910554.com-地下六彩开官方网站| www.980436.com-苏州福利彩票加盟| www.kh.com-北京快三官网开奖| www.rd50.com-时时彩遗漏提示软件| www.566816.com-6768彩票下载| www.096159.com-排列三众彩网杀码| www.026959.com-湖北快三遗漏统计值| www.137394.com-快三彩票qq群| www.bo90.cc-易彩网在哪下载| www.29752.com-最正规的快彩| www.29nc.com-彩铅画植物-| www.yv92.com-福彩3d走开奖结果| www.061967.com-福彩双色球领奖流程| www.763058.com-海南41彩票-| www.948176.com-中彩网3d专家推荐| 500彩票www.26299l.com| www.a18.wang-新浪爱彩旧版| www.4161.cm-彩虹无人机重量| www.00952.com-王牌彩票怎么玩法| www.71768.com-富民彩票是骗局吗| www.037152.com-彩票缩水软件有用吗| www.7029.org-竞彩篮球如何计算| www.310446.com-鉴别釉上彩釉中彩| www.409166.com-澳洲三分彩规则| www.44412.com-广州体育彩任五开奖| www.358186.com-真认彩票-| www.590165.com-中国竟猜足彩网| www.073060.com-全民赢彩票苹果版| www.444458.com-福彩3d彩报大全| www.611340.com-双彩网开奖直播| www.746238.com-禁止网络售彩通知| www.892391.com-彩票榜安卓-| www.qn67.com-三军大小快三咋看的| www.31795.com-南粤好彩三特别号码| www.687011.com-体彩大乐透中奖人| www.787172.com-手机上买世界杯彩票| www.867074.com-快三作弊器软件下载| www.925475.com-彩6app下载-| www.987444.com-黑龙江福彩p62| www.vv5.com-快彩助手下载| www.9481.loan-神彩网登录-| www.02qv.com-e球彩总进球数规则| www.2765.biz-中彩票的图-| www.22fp.com-黑客侵入彩票网站| www.0958.bid-彩票走势图下载大全| www.277453.com-快三彩票的网站| www.228922.com-快三推荐号河北| www.376660.com-福彩睌秋乙种和值谜| www.663766.com-体彩篮球竞赛结果| www.805760.com-9号彩票下载| www.919061.com-福彩3d最精准杀号| www.cp104.cc-购买双色球彩票| www.780158.com-3d福彩讲座视频| www.941511.com-竟彩篮球-| www.lu78.cc-大中华彩票彩种| www.0983.biz-91彩神代玩违法吗| www.74143.com-彩之网互动区首页| www.332612.com-网上购彩平台可靠吗| www.559350.com-多盈彩票手机版| www.252983.com-山东好彩快三| www.8887.site-福彩十二生肖网站| www.772006.com-广东东方亮彩| www.034079.com-cba体育彩票| www.46605.com-彩票四季发财怎么玩| www.3147.org-好彩网址是多少| www.28360.com-彩乃奈奈微博| www.638528.com-什邡体彩店南城格调| www.503729.com-出售博彩程序| www.997479.com-七星彩内部册子| www.6260.vip-稳赚的彩票投注技巧| www.693679.com-学买彩票-| www.512041.com-彩铅古装人物画| www.59616.cc-app28送彩-| www.542502.com-福彩今晚金码试机号| www.444243.com-体彩p3大小遗漏| www.540660.com-谁驾着七彩祥云| www.631367.com-爱彩人注册-| www.780234.com-七星彩梦兆解码大全| www.907106.com-富彩网是正规网站么| www.094188.com-快乐12彩票-| www.854737.com-中国体彩怎么查讯| www.43629.com-大型网上购彩平台| www.668475.com-去国外彩票公司工作| www.031062.com-珍爱网彩票托最新| www.174119.com-北京体彩十一选五前| www.386213.com-彩票网站开发在哪找| www.53gb.com-福彩3d口袋布衣图| www.yf00.com-好彩店客服电话| www.284380.com-时时彩为什么都是输| www.410090.com-体彩3l选7走势图| www.501879.com-福星福彩3d-| www.563897.com-福彩3d图今天的图| www.639295.com-转租彩票站注意事项| www.773812.com-国外搞时时彩犯法吗| www.833692.com-无嘴好彩香烟多少钱| www.906185.com-吉林快三会不会作弊| www.971495.com-3d彩吧44462| www.9900.vip-高频竞彩-| www.879353.com-天津福利彩票| www.963354.com-彩票代买-| 易彩集团www.25688k.com| www.25262.com-彩票开奖杳询| www.3850.wang-星彩医学美容医院| www.21941.com-新浪篮彩-| www.160057.com-福彩自助投注机加盟| www.172023.com-快三开奖结果河南| www.95787.com-福彩百名公益助学| www.110761.com-皇都彩票安卓版下载| www.222229.com-春节后彩票几号开售| www.26828.cc-七星彩经常开的规律| www.503125.com-昆明彩票报-| www.369554.com-七星彩摇奖机原理| www.6350.cc-体彩试机号走势图| www.388257.com-华彩咨询官网|