移动端swiper轮播图

作者: 前端来入坑 | 来源:发表于2019-10-20 19:24 被阅读0次

js-插件/框架
微信小程序学习-轮播图组件swiper
推荐几款无依赖轻量高效的开源JS插件和库
CSS3 swiper框架
移动端swiper轮播图
swiper 响应式开发
移动端事件的学习整理
vue-awesome-swiper实现3d轮播图
IOS内嵌H5使用swiper 出现元素闪屏问题
关于VueAwesomeSwiper在VUE中的使用以及遇到的一

完整轮播图：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../package/css/swiper.min.css">

  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;

    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <!-- Swiper -->
  <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>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  <!-- Swiper JS -->
  <script src="../package/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html>

spaceBetween：轮播图每张图之间的空格，设置为0就没有间距
autoplay:自动轮播
-- delay 轮播时间
-- disableOnInteraction false用户手动滑动图片后还能继续自动轮播 true用户手动滑动图片后不再自动轮播
pagination 分页器可以设置type
-- type bullets’ 圆点（默认）‘fraction’ 分式 ‘progressbar’ 进度条‘custom’ 自定义

如果需要一个页面有两个swipe轮播图要设置什么呢？

给swiper-container设置id为swipe1和swipe2,还有给swiper-pagination也设置两个不同的id,比如swiper-p1和swiper-p2.

<div class="swiper-container" id="swiper2">
<div class="swiper-pagination" id="swiper-p2"></div>

然后在js里面修改相应位置就可以了

var swiper2 = new Swiper('#swiper2', {
      spaceBetween: 0,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '#swiper-p2',
        clickable: true,
      }
    });

官网：https://www.swiper.com.cn/api/start/new.html
swiper的官方例子可以在公众号回复10获取