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.227533.com-快三秒饮品-| www.472616.com-中了2亿彩票的小说| www.596195.com-彩票投注倍数| www.730796.com-竞彩网完整比分直播| 手机购彩www.391110.com| www.xb81.com-328彩票下载| www.78mi.com-乐彩网摘一乐彩网| www.2802.vip-香港好彩网app| www.9118.la-七乐彩2015-| www.59654.com-赢彩彩票是真的吗| www.29yb.com-福利彩开奖票| www.19af.com-七天官方彩票网| www.198477.com-湖北福彩快三统计表| www.639414.com-彩票店有没有刮刮乐| www.802266.com-精彩视频在线观看| www.890970.com-魔方彩票app下载| www.974150.com-正规腾讯分分彩平台| www.100021.com-533彩票官方网站| www.251986.com-彩宝贝app下载| www.659614.com-新彩网吧-| www.840833.com-彩票中奖要交多少税| www.no73.com-购买福彩软件哪个好| www.013547.com-南国彩网-| www.772415.com-博彩套利骗局| www.947078.com-快乐12彩票-| www.iy9.cc-百姓彩票网官方端口| www.319001.com-168时时彩-| www.456774.com-六玄网香港马彩解图| www.280067.com-福彩三d出组三规律| www.375566.com-拉彩金麻将安卓版| www.122872.com-酷彩美国官网| www.056767.com-有人举报22彩票吗| www.829365.com-一彩仓库-| www.227267.com-快三走势图江苏遗漏| www.751960.com-银彩注册-| www.pe45.com-河北福利彩票排列7| www.028931.com-澳客大乐透彩票网| www.109687.com-腾讯分分彩挂机论坛| www.033745.com-如意彩票登陆| www.117716.com-快乐彩票官网下载| www.197649.com-彩宝双色球预测汇总| www.vd90.com-幸运快三追号技巧| www.5023.cm-家彩3d开奖网| www.327295.com-三b彩票-| www.222022.com-红牛彩票快3| www.355335.com-彩友网才有cc| www.238571.com-快三和值跨度表大图| www.365132.com-彩票冷热号怎么看| www.120262.com-吉林快三群骗局揭秘| www.196575.com-百宝彩河北快三| www.718618.com-彩虹色是什么意思| www.345079.com-叫手游的彩票| www.449333.com-怎么下载豪彩| www.061835.com-彩客网假的-| www.081050.com-彩赢乐登录-| www.79fm.com-500万网彩票| www.975756.com-江西彩礼高吗| www.ip31.com-新版500万彩票网| www.l64.me-彩神lv8-| www.53il.com-祥云彩票网址| www.2002.pro-北京和彩放题哪家好| www.347576.com-金彩网现在有人玩吗| www.685503.com-贵宾中彩站-| www.849846.com-qq分分彩开奖官网| www.219568.com-体彩快乐扑克| www.640010.com-大通彩票登录| www.776811.com-锋彩直播官网首页| www.888232.com-智彩网-| www.992997.com-喜乐彩票是什么| www.nm44.com-玩快彩王输了一万| www.209602.com-高频彩怎么赚钱| www.7bj.com-中山体育彩票发行| www.05gu.com-彩铅渐变画可爱| www.901044.com-福彩排三开奖号| www.at63.com-大同私彩平台信誉好| www.31sr.com-竞彩软件下载哪个好| www.3143.cn-成都体彩店-| www.902559.com-微信买江苏快三赚钱| www.965964.com-福彩快3贴吧论坛| 七乐彩www.700539.com| www.37rk.com-华彩网怎么样| www.22sl.com-大本营彩票提不了款| www.148754.com-彩票倍投计算工具| www.776658.com-亿彩堂app怎么样| www.974299.com-怎样使用手机买彩票| www.6kj.cc-智能福彩3d-| www.979476.com-彩金多少钱一克| www.8400.org-乐福彩票聊天室| www.99248.com-中国足彩网下载| www.388479.com-支付宝还能买彩票吗| www.532280.com-内河5分彩开奖结果| www.87973.com-千禧彩票备用网址| www.106038.com-体育彩票二维码扫描| www.84223.com-北京福彩快三下| www.396013.com-福彩放假停售| www.786906.com-彩票三口双彩仑论殒| www.28at.com-福利彩票注册账号| www.178205.com-快三猜一个号怎么玩| www.393962.com-昨天的福彩开奖亏| www.656308.com-龙虎彩票在哪玩| www.610528.com-多肉彩铅画教程图解| www.73ch.com-懂彩帝app怎么样| www.482162.com-彩票开奖吉林快3| www.585925.com-28彩票线路检测| www.967686.com-快购彩票平台怎么样| www.742323.com-天天中彩五吗| www.983866.cc-快三开奖信息双彩网| www.0ss.cc-大发快3彩乐网| www.km37.com-江苏体彩开奖查询| www.234645.com-福彩3d专业版下载| www.268586.com-河南福彩地址| www.382832.com-19051足彩奖金| www.536556.com-数字彩票有哪几种| www.617966.com-人人彩票怎么打不开| www.703346.com-lol彩票广告| www.oe46.com-大陆平台彩票送彩金| www.15197.com-河北快三投注计划| www.821038.com-彩色透水混凝路面| www.77966.com-福彩3d摇奖现场| www.169298.com-安徽快三预测| www.637775.com-体彩的各种玩法| www.916129.com-买私彩报警有用吗| www.4460.xyz-福利彩票投注站收入| www.77014.com-丽彩集团有限公司| www.188296.com-内蒙福彩三的| www.372306.com-福彩开奖号是多少| www.z85.cc-李彩桦单身部落吻戏| www.927969.com-亿元大奖彩票号码| www.89ow.com-河内五分彩官网走势| www.266359.cc-四川福彩网-| www.513596.com-时时彩6注必出后二| www.3088.gg-彩票老司机靠谱吗| www.40cl.com-彩礼超过2万| www.1512.bid-购彩彩票手机版| www.7928.cn-网易彩票是-| www.94kx.com-本期七星彩彩缘之星| www.7816.xyz-职业彩民年收入| www.t84.me-胜负彩合买-| www.fs03.com-北京极速快三官网| www.49oo.com-彩票可以推理出来了| www.84099.cc-易彩找人代玩骗局| www.8199.com-亚洲合法彩票| www.122486.com-微信代购彩票| www.311768.com-买快三彩票是赌博吗| www.213640.com-信誉彩票平台排行榜| www.360116.com-体育彩票销量排行榜| www.858954.com-彩神vll攻略| www.261703.com-竞彩让球-| www.364123.com-3分时时彩下载| www.44068.cc-中国体育彩票店转让| www.1462.com-初二彩铅画-| www.3651.cn-鸿福彩票诈骗| www.16258.cc-彩宏平台靠谱么| www.89734.com-福彩七乐彩如何中奖| www.377576.com-彩票店一般几点下班| www.957042.com-2044彩票平台| www.n13.org-河内五分彩开奖网站| www.069330.com-彩神8v-| www.821126.com-吉林快三软件自动| www.367792.com-彩民彩票靠谱吗| www.259047.cc-竞彩吖三-| www.874242.com-2012七乐彩-| www.904044.com-六喝彩开奖结果| 6678彩票www.2188cai.com|