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.505619.com-炫彩水晶泥游戏| www.305745.com-天津福彩前三直遗漏| 大赢家彩票www.514611.com| www.90qc.com-必中彩票首页| www.5389.cm-彩票777好不好| www.tz23.com-彩票长龙一般是多少| 趣彩网www.qucp0.com| www.290011.com-彩票双色球必中预测| www.116393.com-福彩和尾-| www.688564.com-彩票吧助手下载安装| www.111310.com-彩民彩吧-| www.83258.cc-打彩票工资-| www.517010.com-时时彩平台网址大网| www.jt85.com-新3d彩票定位胆| www.813494.com-福利彩票3d新彩吧| www.9178.org-七乐彩几等奖说明| www.033828.com-凤凰彩世界官网| www.363508.com-3d千禧近十期彩吧| www.501937.com-白菜网领彩金| www.012466.com-彩经网河北快三开奖| www.632909.com-3d彩票怎么找火号| www.827451.com-福彩3d作假事件| www.519.vip-时时彩五星通选中奖| www.171618.com-查询彩票开奖| www.352912.com-热购彩票靠谱吗| www.588870.cc-体彩七星彩好久开奖| www.915799.com-加盟福利彩票赚钱吗| www.37zl.com-七星开奖彩结果下载| www.159646.com-快三13和值-| www.316882.com-中国福利彩票标志| www.513608.com-海南私彩长条规律图| www.646434.com-职业买彩-| www.802787.com-美国彩票中奖交税| www.949275.com-彩票出票后能取消吗| www.hs16.com-北京体彩兑奖大厅| www.353583.com-1360亿彩票-| www.274518.com-福彩快三计算方法| www.6478.xyz-51时时彩-| www.51821.com-福彩3d定位-| www.603757.com-粉彩少女-| www.679261.com-搜狗彩票网-| www.161150.com-福彩受控制吗| www.999754.com-快三除三余数| www.gz71.com-百盈彩票是骗局吗| www.n30.com-爱乐透彩票网双色球| www.42rf.com-x原彩显示-| www.652424.com-福彩3d几开奖时间| www.696563.com-新浪爱彩足球资料| www.878787.com-体育彩票玩法说明| www.985213.com-竞彩单场专家总汇| 6678彩票www.2188cai.com| www.050496.com-亚洲彩票平台排行| www.1988.pw-aa彩票助手软件| www.858543.com-湖北快三封盘时间| www.939577.com-福彩在线注册大小| www.996671.com-易彩票漏洞-| www.bg97.com-彩票代投佣金任务| www.vg60.com-河北快三网页计划| www.330153.com-快三群号微信| www.006190.com-彩票网上投注平台| www.306299.com-快三开奖记录查询表| www.126102.com-北京福彩快三图表| www.205586.com-甘肃快三遗漏一定牛| www.283230.com-有极速快三吗| www.09ve.com-爱购彩票安全吗| www.569580.com-福彩三地但马图| www.869654.com-刮彩票中大奖的技巧| www.336.cm-彩票守号中奖故事会| www.31811.cc-最新胜负彩结果| www.035081.com-有倍率高的彩票网站| www.211201.com-双色球快三玩法| www.367001.com-彼岸花图片彩铅画| www.555877.com-777乐彩网-| www.708485.com-大发时时彩后二技巧| www.507920.com-彩票收藏文化| www.649939.com-彩民周刊小宋双色球| www.780925.com-玩彩票幸运28软件| www.907091.com-买彩票的幸运数字| 老彩票www.775704.com| www.029157.com-神州彩app下载| www.168908.com-中国体育彩票大乐透| www.252728.com-七星彩微彩论坛| www.332178.com-买彩票赚钱吗| www.405882.com-菲律宾彩票包网服务| www.937567.com-m5彩票-| www.528795.com-豪赢买彩票靠谱不| www.776138.com-福利彩票购买技巧| www.872467.com-我要看安徽福彩网| www.926735.com-达人彩票怎么样| www.978551.com-易旺彩票网址| www.cai8155.com贵州省福彩兑奖中心| www.001643.com-极速类彩票平台| www.060900.com-网上买彩票要判刑吗| www.137677.com-虎牙彩票-| www.231895.com-彩中彩平台-| www.349000.com-彩票如何选热号| www.610587.com-彩钢瓦光伏安装价格| www.54ye.com-彩票兑换中心商品| www.8277.loan-九九彩票怎么样| www.419958.com-福彩3d生肖图| www.182588.com-中国体彩网官方网| www.967904.com-福彩14名领导死刑| www.93kg.com-河内五分彩正规吗| www.xs2.cc-湖北福彩3d走势| www.958857.com-网上彩票开售| 名门彩www.33997l.com| www.dx73.com-彩神iv靠谱吗| www.403398.com-ios大公鸡七星彩| www.588205.com-乐优炫彩最新版本| www.713726.com-彩票单双怎么算| www.0634.top-百度中彩彩票网| www.720096.com-购买足彩技巧经验| www.796405.com-梦见彩票中奖去兑奖| www.869186.com-巨丰彩票登录大厅| www.923505.com-包头彩票站双机转让| www.973948.com-头条彩票app下载| 爱彩乐www.532918.com| www.100140.com-福利彩票8炫彩| www.769172.com-620好彩网-| www.840068.com-官方彩传统彩| www.921928.com-彩神争vlll苹果| www.986609.com-彩客网一官网| www.yp6.com-彩票快三怎么玩法| www.40rx.com-新大陆彩票计划| www.1591.wang-777彩票高手论坛| www.635329.com-彩宝10大品牌| www.351315.com-87彩店二维码| www.497654.com-辉煌福彩-| www.616161.cc-竞彩胜平负怎么玩| www.761952.com-足球竞彩彩票软件| www.925970.com-哈尔滨彩票中奖故事| 中国福利彩票www.3478y.cc| www.974510.cc-彩运来官网手机登录| 乐博彩票www.848255.com| www.0370.love-花样快三-| www.21939.com-中国人福彩-| www.76933.cc-优彩彩票下载| www.678516.com-江苏福彩网论坛| www.350278.com-福彩3d五行八卦| www.389620.com-新郑彩票店转让信息| www.406883.com-中信彩票技巧| www.919196.com-江苏快三怎么看| www.984130.com-彩店宝彩票肇星| www.323.hk-金巴黎彩票平台注册| www.3668.in-今天足彩分析| www.901038.com-福彩大乐透奖金规则| www.200096.cc-昨福利彩票开奖号码| www.805808.com-统一彩票是真是假| www.8qe.com-在国外买彩票中奖| www.34po.com-大成彩票平台| www.599.date-福龙彩票平台| www.400329.com-七星彩试机号开机号| www.9580.shop-保利彩票能提现吗| www.059186.com-篮彩分析-| www.120269.com-腾讯五分彩是真的吗| www.351991.com-体彩店没有双色球吗| www.xl33.com-甘肃福彩陇彩宝a| www.2642.pw-德国时时彩官方网站| www.442.cc-天天彩天空彩彩票| www.4334.net-淼鑫彩票app| www.8687.net-今天体彩开那个奖| www.29258.cc-手机从哪买彩票| www.78987.cc-重庆彩票领奖流程| www.792672.com-在福彩中心工作人员|