1. 首页
  2. 源码素材
  3. 前端素材

【pc素材】swiper产品解决方案列表滚动布局代码

  • 使用方法

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>

相关文件下载地址
该资源需登录后下载,去登录?
©下载资源版权归作者所有;本站所有资源均来源于网络,仅供学习使用,请支持正版!

原创文章,作者:倔强的阿飞,如若转载,请注明出处:https://www.xnhyl.cn/53.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:admin@xnhyl.cn

工作时间:周一至周五,9:30-18:30,节假日休息

【pc素材】swiper产品解决方案列表滚动布局代码