zoukankan      html  css  js  c++  java
  • swiper学习笔记一

    示例:
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper- silde">内容一</div>
        <div class="swiper- silde">内容二</div>
        <div class="swiper- silde">内容三</div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar"></div>
    </div>
    一、Swiper初始化

    var newSwiper=Swiper('swiper容器的css选择器',{个性化配置})
    注:一个页面中引用多个Swiper,可以给每个容器加上ID或Class区分,要保留默认的类名swiper-container。

    二、基本选项

    1.initialSlide:初始化slide索引,默认为0
    2.direction:slide滑动方向,默认水平;hroizontal(水平)和vertical(垂直)
    3.speed:滑动速度,默认300
    4.autoplay:自动切换时间间隔

    三、Slides grid(网格分布)

    1.slidesPerView:设置容器能够同时显示slide数量,默认1
    2.slidesPerGroup:设置多少个slide为一组进行切换,默认1
    3.spaceBetween:slide之间的间隔(px),默认0
    4.slidesOffsetBefore:设置与左的偏移量(px),默认0
    5.slidesOffetAfter:设置与右的偏移量(px),默认0

    四、loop(环路)
    1.loop模式true则开启,

  • 相关阅读:
    回顾初心
    团队作业6(代码复审+事后诸葛亮)
    Alpha阶段项目复审(鸽牌开发小分队)
    事后诸葛亮(鸽牌开发小分队)
    团队作业5
    第七篇Scrum冲刺博客
    第六篇Scrum冲刺博客
    第五篇Scrum冲刺博客
    第四篇Scrum冲刺博客
    第三篇Scrum冲刺博客
  • 原文地址:https://www.cnblogs.com/wangpengfei8313/p/7993399.html
Copyright © 2011-2022 走看看