zoukankan      html  css  js  c++  java
  • swiper常用选项

      <script>
        var swiper = new Swiper('.swiper-container', {
        reverseDirection: true, //反向轮播 默认:false
        disableOnInteraction: false, //true: 触碰后自动切换停止 false: 触碰后自动切换也不会停止
        virtualTranslate : true, //有缓动效果的滑动。
    direction : 'vertical', //切换方向 horizontal:横向切换 vertical:竖向切换 spaceBetween: 30, //swiper-slide 之间的距离 slidesPerView : 2, //显示几个 slidesPerGroup : 1, //切换几个 loop : true, // 环路 //时间 speed:300, autoplay : { delay:3000 }, // 如果需要分页器 pagination: { el: '.swiper-pagination', clickable: true, }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }); </script>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</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>
  • 相关阅读:
    vim 常用操作
    Zookeeper 一种简单的原子操作机制:
    用习惯的vimrc配置,在这里记录一下,以后可以继续完善使用
    static_cast, dynamic_cast, const_cast探讨【转】
    常用CSS标签使用
    Java基础
    Hibernate的第一个程序
    Hibernate的优缺点
    python基础语法
    ansible-role安装nginx,keepalived,tomcat
  • 原文地址:https://www.cnblogs.com/xaun/p/13025639.html
Copyright © 2011-2022 走看看