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.82529.com-彩票表格制作软件| www.077139.com-体彩7位数怎么买| www.775713.com-广州市福彩公益金| www.386249.com-广州福彩开奖结果| www.ft62.com-福彩快三中奖多少钱| www.py40.com-彩九下载软件| www.561813.com-新彩计划网址| www.657493.com-中彩网原版资料| www.749928.com-分分彩票投注软件| www.437705.com-星彩无惨妖气漫画网| www.078072.com-福彩在线是什么| www.215922.com-算局七星彩奖表| www.292735.com-福彩112开奖号码| www.372023.com-彩票截止前购买| www.445969.com-吉林体育彩票十一| www.265457.com-福彩3d彩吧预测| www.388158.com-老挝博彩打工可靠吗| www.136405.com-七彩互联-| www.226664.com-浙江福彩三地走势图| www.318169.com-网上赌十字彩| www.855562.com-福彩3d众彩专家| www.882035.com-彩票工资车-| www.qr5.com-云南省福彩兑奖地址| www.21920.com-红宇体彩店链接| www.097819.com-江西快三豹子遗漏| www.01188.com-相富年图彩之网| www.378430.com-体彩358开的啥| www.810090.com-竞彩串规则-| www.871416.com-福彩藏机图今天破解| www.5203.org-必发彩票信誉第一| www.252336.com-专家买彩时票| www.668176.com-农村结婚彩礼多少钱| www.877336.com-七乐彩红球杀号| www.cp8548.com-河北省快三开奖结果| www.10zh.com-四季彩平台用户登录| www.696525.com-澳门时时彩有官网吗| www.787758.com-竞彩篮球胜平负| www.871436.com-福彩3d天天彩图| www.941342.com-加盟时时彩代理注册| 天天彩票www.2373l.com| www.ua29.com-怎样安装人人中彩票| www.106766.com-今天彩票开奖结果是| www.302780.com-福利彩票快3安装| www.38fv.com-彩乐国际彩票| www.96714.com-中彩票怎么花| www.139475.com-致享7彩福-| www.166308.com-甘肃快三今日预测| www.qk81.com-中国体育彩票开将| www.823271.com-58福彩网页-| www.961136.com-福彩3d山东图| www.668823.com-欢乐彩票是真的吗| www.804557.com-彩票源码演示站| www.922856.com-体彩代销证到期了| 快彩www.81678m.com| www.oo61.com-江苏快三19期| www.62568.com-福建即乐彩十一选五| www.4pz.cc-足球竞彩二串一心水| www.055319.com-彩票有几种奖项| www.539754.com-搜狗彩票网登陆| www.548585.com-广州彩票12生肖| www.259663.com-广西福彩大小走势图| www.vt19.com-印象彩票开奖网| www.572662.com-全国彩票计划| www.967430.com-078彩票app-| www.990728.com-怎么破解彩票的充值| www.wg20.com-体彩排列三推荐号码| www.82mi.com-七星彩分顺序吗| www.89rk.com-竞彩八串一今日推荐| www.473044.com-分分彩刷流水方案| www.618193.com-福彩3d彩吧开机号| www.980458.com-广东福彩中心地址| www.a45.org-湖南省福彩兑奖中心| www.318913.com-江西省体育彩票兑奖| www.496801.com-六爻测3d彩票方法| www.607553.com-多乐彩兑奖时间| www.948126.com-南昌福彩-| www.tk1.com-福利彩票江西快3| www.397409.com-网络私彩举报电话| www.536696.com-3d福彩3d-| www.465684.com-八卦预测彩票| www.664701.com-油性彩铅画入门教程| www.799449.com-7天彩票官方网站| www.922360.com-全国各地彩礼价格表| www.up3.com-七彩奖今晚开奖号码| www.8686.in-福利彩票体育彩票| www.794054.com-公务员彩票中奖| www.31186.cc-神彩争霸11下载| www.065705.com-彩虹岛官网-| www.396263.com-温岭彩虹小镇| www.402520.com-足彩猜比分单双| www.572761.com-网购彩店-| www.115606.com-彩票店加盟的好处| www.zo29.com-彩票最新新闻| www.58tz.com-百宝彩玩法-| www.557762.com-双色球杀红球彩经网| www.073094.cc-丹麦快乐彩全天计划| www.660755.com-阿里彩票平台首页| www.741939.com-可以网上购彩的软件| www.es0.cc-优信彩票快3| www.sd7.com-代玩彩票兼职群| www.rc40.com-香港体彩走势图| www.971829.com-湖北制造假彩票案| www.bx52.com-体彩排列三规则| www.tt79.cc-彩票合买大厅网址| www.cp9379.com-正规的彩票软件| www.je21.com-足彩竞彩网计算器| www.786234.com-海南私彩规律图| www.02094.com-买彩票成瘾-| www.860185.com-官网下载天天中彩票| www.01kt.com-本期七星彩头奖号码| www.74862.com-彩票可以在网上买| www.050335.com-买3d黑彩5码| www.134998.com-二分快三官网| www.273965.com-二分时时彩-| www.662917.com-福利彩票选好法| www.764234.com-彩克下载-| www.858891.com-福彩33期开奖号码| www.0392.net-重生时时彩助手| www.309578.com-吉林省彩票官网| www.419646.com-秒速时时彩登录网站| www.1913.online东方彩票官方网站| www.18767.com-最新足彩比分结果| www.292153.com-重庆快三官网投注| www.594281.cc-七彩汇下载二维码| www.99244.com-特彩吧旧版高手| www.37967.com-红彩会网页版| www.5861.wang-彩票可以拍照兑奖吗| www.299751.com-澳客竞彩手机版| www.367295.com-福彩3d理论返奖率| www.498688.com-腾讯体育怎么买竞彩| www.337270.com-北京体彩网首页| www.034355.com-cba竞彩在哪里买| www.156376.com-好彩堂网-| www.6dj.cc-希腊分分彩app| www.qm20.com-快三1分彩-| www.7246.vip-彩虹的阅读答案| www.586307.com-老虎机送新手彩金| www.298922.com-彩13官网-| www.623677.com-财富彩票的网址| www.lm91.com-中彩网…-| www.04cv.com-v8彩票app网站| www.122314.com-北京五亿彩app| www.467221.com-七乐彩开始销售年份| www.8128.win-一分快三贴吧| www.256729.com-中彩网怎么买彩票| www.320358.com-七星彩走势图表最新| www.370525.com-怎样弄彩票的走势图| www.528737.com-彩票的复式计算公式| www.590881.com-中国足球彩票怎么买| www.97419.com-古建彩绘-| www.099689.com-福利彩票手机助手| www.741110.com-彩宝贝开奖号码| www.807358.com-手机彩票投注站软件| www.885137.com-神州彩票网下载| www.963612.com-被盈丰彩票骗了| www.655.cm-圣地彩-| www.355193.com-双色球彩民故事| www.88585.cc-做梦梦到中彩票了| www.99lt.com-乐彩网双色球遗漏号| www.133266.com-七星彩高手图规| www.905083.com-苏州彩票店转让信息| www.395591.com-3d彩票技术讲座| www.903408.com-手机彩票投注平台| www.769836.com-好彩足球彩票|