zoukankan      html  css  js  c++  java
  • 轮播左右小化中间大

    <style>

    .swiper-container{
    100%;margin:0 auto;position:relative;
    background:#fff;
    }
    .swiper-slide span{
    display:block;
    90%;
    margin:0 auto;
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    }
    </style>

    <div class="swiper-container">
    <div class="swiper-wrapper">
    <%for(int i=0;i<5;i++){%>
    <div class="swiper-slide">
    <span>
    <img src="/wx/images/banner.jpg" style="100%;display:block"/>
    </span>
    </div>
    <%}%>
    </div>
    </div>
    <script src="/js/swiper.min.js"></script>
    <script>
    // 轮播图
    // 初始化swiper
    var mySwiper2 = new Swiper('.swiper-container', {
    autoplay:5000,//自动滑动
    speed:500,//自动滑动开始到结束的时间(单位ms)
    loop:true,//开启循环
    loopedSlides:15,//在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
    slidesPerView:'auto',//设置slider容器能够同时显示的slides数量(carousel模式)。另外,支持'auto'值,会根据容器container的宽度调整slides数目。
    effect:'coverflow',//可以实现3D效果的轮播,
    centeredSlides:true,//设定为true时,active slide会居中,而不是默认状态下的居左。
    coverflow:{
    rotate:0,//slide做3d旋转时Y轴的旋转角度。默认50。
    stretch:15,//每个slide之间的拉伸值,越大slide靠得越紧。 默认0。
    depth:100,//slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。
    modifier:1,//depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。
    slideShadows:false,//开启slide阴影。默认 true。
    },
    });
    </script>

  • 相关阅读:
    crontab
    待重写
    待重写
    多套开发资源使用情况
    待重写
    待重写
    待重写
    docker安装es
    docker run启动时目录映射研究
    rabbitmq第二篇:使用插件实现延迟功能
  • 原文地址:https://www.cnblogs.com/hxlj130520/p/14155396.html
Copyright © 2011-2022 走看看