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>
  • 相关阅读:
    Jetson AGX Xavier配置使用OpenCV(报错:No package 'opencv' found)
    centos7 lnmp
    php用户签到,领取红包
    php红包功能
    Mysql 主从复制
    mysql 小技巧
    区块链学习笔记一
    PHP 常用自定义函数
    centos7.4 搭建lnmp
    什么是跨域?怎么解决跨域问题?
  • 原文地址:https://www.cnblogs.com/xaun/p/13025639.html
Copyright © 2011-2022 走看看