• 轮播左右小化中间大


    <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>

  • 相关阅读:
    竞赛中遇到的英文单词集锦
    #复习 搜索与图论:排列数字、走迷宫~ 20.8.20起
    #容斥原理 20.9.10
    #sort :快速排序、第k个数 20.09.12
    #STL #unordered_map : C++11 unordered_map详细介绍
    Java 面试必备(字符串专题)
    JAVA面试必备题(垃圾回收专题)
    Collection框架的结构(面试重点)
    CSS 层级样式表
    window搭建mongodb副本集
  • 原文地址:https://www.cnblogs.com/hxlj130520/p/14155396.html
Copyright © 2020-2023  润新知