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.13fn.com-苏州e球彩开奖结果| www.688290.com-东莞体彩网点申请| www.853866.com-365彩票怎样| www.158417.com-北单足彩对阵表| www.365740.cc-福彩专家三天计划| www.658554.com-彩吧彩票单双大小号| www.828697.com-彩票站兑奖会被骗吗| www.991014.com-时时彩定毒胆技巧| www.d99.biz-竞彩多久可以兑奖| www.2394.cm-钟嘉欣好彩妹图片| www.200761.com-520彩票-| www.130907.com-体彩七星彩历史数据| www.558666.com-夸女生的彩虹屁| www.57351.cc-河北体彩网11| www.139402.com-竞猜足彩app| www.429822.com-简单好看的水彩画| www.391491.com-福利彩票105期| www.3197.xyz-江苏七星彩开奖号| www.216446.com-快三抓豹子-| www.081592.com-中彩票500的图片| www.089058.com-中国彩票中奖号码| www.72fu.com-香港五分彩可以玩么| www.4163.com-四重彩虹-| www.228928.com-江苏快三同号| www.127397.com-彩虹六号搞笑表情包| www.281098.com-非法经营网络彩票| www.386860.com-双色球彩51票预测| www.520658.com-乐彩客彩票下载安装| www.6636.org-七星彩抓规律神器| www.28396.com-彩票赌博客户资源| www.86781.com-竞彩猫怎么不播了| www.060021.com-最新彩票走势图| www.144362.com-竞彩单场保本对冲| www.233148.com-吉林快三最新版| www.954350.com-大红鹰彩票下载| www.sm12.com-时时彩和值规律| www.338392.com-七乐彩专家杀号汇总| www.456469.com-芜湖彩票中奖结果| www.899799.com-福利彩票店装修成本| www.974753.com-中国体彩顶呱刮官网| www.ys3.com-彩票双色球中奖规则| www.xv93.com-河北体彩任选5遗漏| www.759719.com-时时彩全天计划宝典| www.868942.com-体彩七星彩怎么兑奖| www.39273.cc-分分彩票pk下载| www.042626.com-网上足彩容错怎么买| www.180724.com-中彩彩票怎么玩| www.541889.com-1216网彩-| www.666468.com-新浪彩票必发行情| www.813049.com-天天彩骗局-| www.953206.com-福彩3d中奖助手| www.33001.cc-南京体彩销售点| www.993571.com-竞彩14场怎么兑奖| www.047877.com-福彩排列3走势图| www.579317.com-人人中彩票正规吗| www.677099.com-立彩软件骗局| www.760029.com-老时时彩走势图彩经| www.832188.com-七星彩摇奖结果| www.905713.com-一分快三经验| www.383681.com-彩票3d组三走势图| www.20998.com-神彩争霸2元彩票| www.32gv.com-福利彩世界平台吧| www.0257.cc-时时彩组选复式| www.6549.in-十分时时彩怎么下载| www.500633.cc-一分彩怎么玩能赢钱| www.610307.com-盈盈彩彩票合法吗| www.835666.com-顺丰丰彩怎么样| www.910416.com-澳客网足球彩票下载| www.976481.com-云南彩票中奖| www.bc25.com-内蒙古福利彩票结果| www.yr31.com-体彩乐三玩法介绍| www.40rm.com-彩票店有节假日吗| www.963821.com-500彩票网页版| 彩票5www.550264.com| www.02pv.cc-世界杯进球彩票| 网易彩票www.562601.com| www.8719.cn-最正规的彩票网站| 吉利彩票www.80065h.com| www.0im.cc-彩票app合法吗| www.392240.com-福彩3d魔图图片| www.m70.website团彩网app-| www.1542.cc-百度福彩3d图库| www.24491.com-彩铅手绘古风人物| www.031122.com-福利彩票开奖查旬| www.163577.com-聚彩彩票ccapi| www.366097.com-儿童世界彩铅画| www.604791.com-彩猫彩票官网| www.840878.com-360足球彩票网| www.383.cc-乐米彩票停售原因| www.07vb.com-好看的彩铅配色| www.441132.com-神彩3肖6码-| www.188881.com-内蒙古快三50| www.362594.com-彩票最新改革方案| www.vk55.com-彩票计划师可靠吗| www.96682.cc-湖北省福彩中心主任| www.48og.com-乐彩33网骗人的吗| www.083047.com-可以反选的彩票工具| www.sa64.com-重庆时时彩官网暂停| www.871977.com-彩票之家彩民你同行| www.bf90.com-黑彩平台注册| www.138020.com-多彩娱乐平台登录| www.5427.xyz-38彩票下载-| www.356093.com-希腊分分彩app| www.570236.com-3hkcc香港好彩| www.089815.com-彩票聊天话术| www.230799.com-玩彩运8人多吗| www.mx11.com-快三网络代理| www.863548.com-时时彩高频接口申请| www.993419.com-足彩入门-| www.ff30.com-广州十分钟彩票开奖| www.636698.com-儿童彩虹绘画图片| www.707651.com-足彩胜负彩即时比分| www.4662.top-买彩票一直买一注| www.32624.com-全民汇彩票电脑版| www.281005.com-重庆时时彩官方通知| www.736118.com-手机玩彩票下载| www.258715.com-中国足彩网官方网址| www.947352.com-彩票辅助工具| www.752456.com-澳客彩票电脑版| www.890859.com-预测彩票的软件| www.507632.com-彩神vll提现| www.305673.com-彩票有必要坚持买吗| www.823188.com-天下体彩主页| www.733897.com-19042胜负彩| www.818714.com-体彩竞彩二串一对冲| www.891948.com-时时彩怎么做计划| www.949650.com-畅赢彩票-| 福彩www.86267g.com| www.594.cn-亚投彩票网址| www.cg69.com-江苏快三线上购买| www.919386.com-体育彩票店有假的吗| www.09ry.com-双色球字谜彩吧论坛| www.3174.cc-看彩啦开机号| www.689363.com-上海福彩中心三楼| www.365969.com-海底世界彩铅画图片| www.614609.cc-七分快三开奖| www.736540.com-上海体育彩票兑奖处| www.908057.com-最有信誉的彩票平台| www.999846.com-福彩定胆杀号| www.wp59.com-彩票走势图分析| www.94ob.com-和乐彩-| www.6733.cx-篮球彩票预测免费| www.244337.com-彩票走势图新浪| www.365124.cc-风之彩彩票官方网站| www.373428.com-足彩胜平负预测推荐| www.635371.com-澳门博彩罪案| www.684238.com-彩经-| www.qs51.com-福彩中心事业编| www.061122.cc-体彩三地开奖结果| www.2407.top-竞彩店买足彩| www.8799.shop-七星彩彩南国论坛| www.955640.com-彩票黑-| www.036639.com-玩足彩输倾家荡产| www.98765.com-甘肃福彩3d太湖继| www.057760.com-七星体彩中奖新闻| www.120657.com-体彩兑奖有提成吗| www.179960.com-手机买彩票app| www.255599.com-七星彩玩法规则| www.575253.com-大发快三赢了很多| www.vl41.com-福彩快3改了| www.19qa.com-更多精彩尽请关注| www.82qt.com-红五彩吧-| www.033650.com-大发快三能猜中数字| www.057411.com-90彩票大发快三|