jQuery基于swiper.js制作主机商城产品案例和解决方案列表单排滚动布局，支持默认自动滚动、带左右按钮和索引分页控制效果代码。
使用方法：
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>
