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>
