zoukankan      html  css  js  c++  java
  • swiper轮播问题之二:默认显示3张图片,中间显示全部两边显示部分

    其二:项目遇到比较有点要求的轮播图,默认显示3张图片,中间显示全部,两边显示部分。如图:

                                               

    网上找了也没有找到合适的,最后经过自己摸索写了出来,贴出代码分享给大家。

            CSS

    .swiper-container {
        margin-top: 20px;
        width: 750px;
        height: 320px;
        margin-bottom: 53px;
        overflow: visible!important;
    }
    .swiper-container .swiper-wrapper .swiper-slide{ width: 620px; border-radius: 20px;}
    .swiper-container .swiper-wrapper .swiper-slide img{width: 100%; height: 320px; border-radius: 20px;}
    .swiper-container .swiper-wrapper .swiper-slide-prev{ margin-top: 18px; height: 284px!important;}
    .swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 284px!important;}
    .swiper-container .swiper-wrapper .swiper-slide-next{ margin-top: 18px; height: 284px!important;}
    .swiper-container .swiper-wrapper .swiper-slide-next img{ height: 284px!important;}
    .swiper-container .swiper-wrapper .swiper-slide-active{ width: 620px;}
    
    .swiper-pagination{
        bottom: -30px!important;
    }
    .swiper-pagination .swiper-pagination-bullet{width: 12px; height: 12px; background: #ff1e1e;}
    .swiper-pagination .swiper-pagination-bullet-active{width: 21px; height: 12px; background: #e75230; border-radius: 6px;}

             DOM

    <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="/images/banner1.jpg" /></div>
                    <div class="swiper-slide"><img src="/images/banner2.jpg" /></div>
                    <div class="swiper-slide"><img src="/images/5.png" /></div>
                    <div class="swiper-slide"><img src="/images/banner2.jpg" /></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
     </div>

            js

    var mySwiper = new Swiper ('.swiper-container', {
                    direction: 'horizontal',
                    loop: true,
                    autoplay: 5000,
                    slidesPerView: "auto",
                    centeredSlides:true,
                    spaceBetween: 20,
                    // 如果需要分页器
                    pagination: '.swiper-pagination',
     })


            以上就是我使用swiper的一点经验,其实对于swiper来说还是很浅显的,swiper加上TweenMax能做出很多很好很强大的动画和功能!下次有时间我会给大家分享点TweenMax的东西。。。

  • 相关阅读:
    tensorflow 安装 CentOS查看CPU、内存、版本等系统信息
    tensorflow 安装 centos下显卡驱动和cuda安装
    tensorflow 安装: could no t load dynamic library 'cudart64_101.dll'; dlerror: cudart64_101.dll not found
    安装tensorflow 官网手册
    安装 TensorFlow时:Cannot uninstall 'enum34'. It is a distutils installed project and thus we ca...
    python pip 和pip3区别
    安装TensorFlow报错Memoryerror
    使用清华开源镜像安装tensorflow
    centos7(python2.7) 安装tensorflow+keras过程
    JavaWeb核心之Servlet
  • 原文地址:https://www.cnblogs.com/toggle/p/7676473.html
Copyright © 2011-2022 走看看