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.289736.com-彩票黑平台名单| www.cp8928.com-内蒙福彩快3走势图| www.42hy.com-篮彩分析预测软件| www.0995.site-高频快彩是什么| www.101142.com-彩运8江苏快3| www.974075.com-好的彩票平台| www.576246.com-快三输钱怎么要回来| www.720070.com-七星彩选号方法| www.824930.com-中国梦想彩票触屏版| www.939076.com-足球预测彩票| 乐彩33www.961339.com| www.sj85.com-足球彩票赔率| www.104006.com-竞彩网篮球开奖结果| www.386355.com-时时彩龙虎走势图| www.784304.com-时时彩购彩助手| www.946588.com-商丘永城彩礼钱多少| 天天彩票www.694010.com| www.597048.com-吉祥彩票网北京赛车| www.590180.com-中国足彩官网平台| www.681411.com-如何劝人不买彩票| www.768089.com-最新彩票资讯网| www.839073.com-凤凰微彩邀请码| www.906082.com-体育竞彩比分直播| www.981406.com-福彩3d今日字谜图| www.cd70.com-十分快三遗漏数据| www.vn63.com-皇都彩票网站| www.153850.com-快三智能选号器| www.92718.com-乐彩33代理-| www.148700.com-快三万能追号计算器| www.254039.com-一分快三怎么看豹子| www.377086.com-京彩e账户app| www.134034.com-黑好彩-| www.225153.com-app宝马彩票| www.312692.com-500彩票网上购彩| www.397462.com-三分彩计划群| www.518999.com-腾讯5分彩app| www.612362.com-雪中彩影官方网站| www.700087.cc-快三彩票能提现吗| www.789615.com-竞彩输钱害人| www.870328.com-福彩3d幸运码安卓| www.54wp.com-彩吧助手网-| www.319897.com-体彩各省中奖情况| www.32604.cc-彩票三地子迷汇总| www.1462.com-初二彩铅画-| www.053156.com-快三一分一开| www.347748.com-天天彩票软件客服| www.301000.com-免费试玩可申请彩金| www.221110.com-香港正规彩票网站| www.297612.com-体彩四码组三遗漏| www.258571.com-竞彩篮球-| www.333888.com-彩票哪买的去哪领奖| www.413342.com-彩色沥青价格是多少| www.21vg.com-博彩充值破解版下载| www.280276.com-时时彩大小单双经验| www.382895.com-彩票一加一多少钱| www.638156.com-竞彩店没客户| www.751019.com-中福彩票手机下载| www.947863.com-台湾彩票分析师| www.j08.org-快三怎么买才能赚钱| www.778656.com-1111彩票安卓版| www.395585.com-礼拜一开奖的彩票| www.128659.com-七乐彩4加1多少钱| www.755851.com-旺彩计划软件下载| www.181545.com-湖北十一选五爱乐彩| www.031718.com-什么彩票网靠谱| www.128470.com-500万彩软件| www.207762.com-彩票应用大全下载| www.274592.com-肖立刚福彩3d推荐| www.111086.com-彩票中奖小说排行榜| www.228443.com-最新退彩礼案例| www.13815.com-爱彩彩票网站首页| www.882746.com-黄山体彩外围| www.020797.com-彩票源码模板| www.393948.com-足彩竞猜投注助手| www.295889.com-快3大彩鲸中奖助手| 彩民网www.caim3.com| www.862847.com-体育彩票16期结果| www.613302.com-搞活动送彩票| www.719383.com-彩吧彩票上的大神| www.817937.com-临沂战神老湿彩票| www.951384.com-qq彩票7com-| www.cp1555.com-快三怎么倍投最合适| www.898360.com-hk百彩网开奖结果| www.983706.com-快三到几点-| www.ge1.com-热门彩种-| www.523828.com-快三魔图怎么看性别| www.cp2202.com-福彩湖北快三一定牛| www.we06.com-七星彩开奖| www.81jh.com-思乐彩票机故障处理| www.089858.com-马耳他瓦莱塔彩票| www.521384.com-美国中彩票缴税| www.17368.cc-小米彩票客户端下载| www.67142.com-兼职彩票平台下注| www.gy41.com-共享彩票是坑人的么| www.04kp.com-月饼彩铅教程| www.111840.com-福彩兑奖需要| www.228110.com-温县彩礼多少| www.400509.com-沈阳体彩中心地址| www.f11.xyz-中体彩-| www.468855.com-福彩迷图第三版| www.331509.com-快三彩票走势怎么看| www.117357.com-开发彩票平台| www.811293.com-中福彩3d试机号| www.890550.com-谁有彩票2倍率的网| www.957797.com-帝王彩色马桶| 福利彩票www.99677q.com| www.hv68.com-3d走势图宝彩网| www.zw41.com-上海福利彩票加盟| www.655838.com-新星彩xcaius| www.753065.com-怎么玩快三彩稳赢| www.900639.com-彩吧彩报第四版| www.986333.com-排3彩吧助手| www.ez53.com-彩票今晚开什么| www.761241.com-四川福彩网官方首页| www.839234.com-正规的网球彩票网| www.928616.com-旺彩11选5软件| www.026308.com-广西体育彩票走势图| 大赢家彩票平台www.609717.com| www.194648.com-福彩好运2-| www.025876.com-河南省体彩中心| www.3558.tv-开户送彩金网站| www.47888.cc-体育彩票玩法奖金| www.105564.com-牛蛙彩票四不像肖| www.169403.com-福彩快三平台| www.003240.com-福彩基诺上市时间| www.13nv.com-辽宁体检彩11选5| www.111507.com-盈彩网下载-| www.194813.com-网上快三是骗局揭秘| www.175363.com-武汉福彩快三开奖| www.6373.cm-3d福彩论坛杀尾| www.115117.com-彩神通4码准不准| www.390653.com-平安彩票会员登录| www.222263.com-117彩票-| www.07263.com-3000万彩票网站| www.95682.com-代销福利彩票刮刮卡| www.117662.com-中彩网幸运快三| www.185677.com-河北福彩快三开奖号| www.254967.com-全天时时彩最准计划| www.100614.com-上期七星彩开奖结果| www.311839.com-3d彩报库吧-| www.393208.com-五个号的彩票是什么| www.503618.com-网易彩票可以购买吗| www.581339.com-彩票选号走势图| www.654918.com-时时彩复试怎么选号| www.653776.com-彩票性缘全网盘| www.270625.com-093彩票官方版| www.gh43.com-广西福彩手机版下载| www.30876.com-8k彩票app主页| www.cp905.com-百姓彩票登录入口| www.37618.com-华彩生活app官网| www.005457.com-福建省体彩彩民论坛| www.129258.com-28彩票平台登录| www.450027.com-爱米彩彩种| www.577353.com-体育彩票复试计算器| www.672698.com-玩体彩外围犯法吗| www.767108.com-河北石家庄福彩自助| www.826411.com-933彩票软件老款| www.880094.com-徐文轩彩票预测网| www.994830.com-惠彩app-| www.ci30.com-一分彩是不是真的| www.uq08.com-查彩票双色球开奖| www.60ti.com-专业玩彩今天预测| www.1979.site-亿发彩票网址| www.206976.com-香港天下彩网网址|