zoukankan      html  css  js  c++  java
  • swiper基本使用

    参数名类型是否必填描述
    swiperContainer HTMLElement or string 必选 Swiper容器的css选择器,例如".swiper-container"
    parameters object 可选 Swiper的个性化配置
    一个页面中引用多个Swiper,可以给每个容器加上ID或Class区分,要保留默认的类名swiper-container。
    HTML
    
    <div class="swiper-container" id="swiper1">....<div>
    <div class="swiper-container" id="swiper2">....<div>
    <div class="swiper-container" id="swiper3">....<div>
    
    JS
    
    var swiper1 = new Swiper('#swiper1');
    var swiper2 = new Swiper('#swiper2');
    var swiper3 = new Swiper('#swiper3');

    关键字

    使用方法示例
    
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
      </div>
    </div>
    <script>
    var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,//可选选项,自动滑动
      initialSlide :2,//默认位置
      direction : 'vertical',//横向 vertical:竖向切换
      speed:300,//动画完成时间 autoplay : { delay:3000 },//切换一次动画时间
      grabCursor : true,//鼠标移上变成小手

      

    }) </script>
  • 相关阅读:
    yii框架_用户登录
    判断变量是否定义
    ajax小结
    yii框架_1
    yii框架_1_简单模型搭建与应用
    Greedy Gift Givers
    C# 音量控制 静音 等
    Fidelity Job Opportunities
    SPSiteDataQuery
    eBooks on html javascript & css
  • 原文地址:https://www.cnblogs.com/xiaozhang666/p/11419640.html
Copyright © 2011-2022 走看看