使用 swiper 做轮播图-阿里云开发者社区

虽然我是一个喜欢造轮子的人，但是对于 swiper，我还是直接拿过来用了，功能很多，也很方便。本文介绍一些常用的功能。

版本 Swiper 8.3.0

基本用法

<div class="swiper mySwiper">
      <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>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
</div>
复制代码

var swiper = new Swiper(".mySwiper", {
 /**
   * 设置Slide的切换效果，默认为"slide"（普通位移切换），
   * 还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、
   * "flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
   */
  effect:slide,
  //自动播放
  autoplay:true,
  // 垂直切换
  direction: "vertical", 
  // slider容器能够同时显示的 slides 数量
  slidesPerView: 3,
  // 在slide之间设置距离(px）
  spaceBetween: 10,
  // 定义slides的数量多少为一组，就是一页切换多少个slides
  slidesPerGroup: 3,
  // 重复
  loop: true,
  /**
   * 默认情况下Swiper 每次滑动时只滑动一个Slide，并且会自动贴合Wrapper。
   * 开启自由模式后，Swiper 会根据惯性滑动可能不止一格且不会贴合。
   * 
   * 自由模式影响的是鼠标拖动或touch移动，分页器不受影响。
   */
  freeMode:false,
  /**
   * 居中幻灯片。设定为true时，当前的active slide 会居中，而不是默认状态下的居左。
   *
   * 一般来说，要配置 loop:true 一起使用，否则初始的时候，并没有居中的效果。
  */
  centeredSlides: true,
  //左右切换按钮
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  //分页
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  on:{
    click: function(e){
      // 打印当前索引
      console.log(e.activeIndex)
    }
  },
});
复制代码

我把所有常用配置的都写上了，不需要哪个直接删除就好。

最外层的 swiper 的样式

margin-left: auto;
margin-right: auto;
position: relative;
复制代码

并没有设置高宽，需要使用者来设置宽高，如果外层容器比它宽，它会左右居中显示。

内层的 swiper-wraper 的样式

position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
复制代码

大小与 swiper 相同。里面的 swiper-slide 从左到右依次排列。默认效果 effect:'slide'，就是左路右滑动的效果。通过在 swiper-wraper上每次更改 transform: translate3d(X,0,0) 的 X 值，形成动画。所以我们可以更改通过改变 animation-timing-function 来更改缓动效果。样式中已经指定的 duration 为 2s ，但不会生效，duration 只能通过 js 由 speed 参数来修改。不过，样式中的 0.2s delay 是有效的。

.swiper-wrapper{
  /* 通过改变animation-timing-function 制作弹性切换效果 */
      transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
 }
复制代码

var swiper = new Swiper('.swiper-container', {
  speed: 2000,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
 });
复制代码

swiper-slider 的样式是

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform
}
复制代码

当给 swiper-slider 加 border 的时候，由于外面的 swiper overflow:hidden会导致边框显示不全。所以我们需要给 swiper-slider class 增加一条样式

box-sizing:border-box;
复制代码

分页器

pagination: {
  el: ".swiper-pagination",
  type: "fraction",
}
复制代码

type有几种

‘bullets’ 圆点（默认）
‘fraction’ 分式，形如 (1/10)
‘progressbar’ 进度条，在顶部的一个细长条，页码越大，长条越长。

或者是自定义

.swiper-pagination-bullet {
   /*自定义分页器样式 */
}
.swiper-pagination-bullet-active {
  /*自定义 当前 分页器样式 */
}
复制代码

pagination: {
  el: ".swiper-pagination",
  clickable: true,
  //自定义分页器 html
  renderBullet: function (index, className) {
    return '<span class="' + className + '">' + (index + 1) + "</span>";
  },
},
复制代码

立体效果

.swiper-slide {
  transition-duration: .2s;
  transform: scale(0.8);
}
.swiper-slide-active,.swiper-slide-duplicate-active{
  transform: scale(1);
}
复制代码

var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      centeredSlides: true,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
 });
复制代码

从样式可以看出，是中间大，两边小。加上 transition后，尺寸切换会变得平滑。

左右各露出一部分

.swiper-slide {
  width: 60%;
}
复制代码

var swiper = new Swiper('.mySwiper', {
  slidesPerView: 'auto',
  spaceBetween: 60,
  centeredSlides: true,
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});
复制代码

原本是只显示一个 slide，但样式上指定 width: 60%; js 又指定 centeredSlides: true后，左右两边就会有一部分显示出来。

缩略图控制

<div class="swiper swiper-big">
      <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>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
  </div>
  <div class="swiper swiper-small">
    <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>
</div>
复制代码

var swiperSmall = new Swiper(".swiper-small", {
  loop:true,
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesProgress: true,
});
new Swiper(".swiper-big", {
  loop:true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  thumbs: {
    swiper: swiperSmall,
  },
});
复制代码

大图 swiper 和小图 swiper 是完全分开的。swiper: swiperSmall 将大小图关联在一起。

小图的 watchSlidesProgress: true 是必须的。 slidesPerView 应该大于1。

要想循环的话，两个 swiper 都需要写上 loop:true

定位锚点

<div class="swiper">
    <div class="swiper-wrapper">
  <div class="swiper-slide" data-hash="slide1">slider1</div>
        <div class="swiper-slide" data-hash="slide2">slider2</div>
        <div class="swiper-slide" data-hash="slide3">slider3</div>
  </div>
</div>
复制代码

new Swiper('.swiper',{ hashNavigation: true, })
复制代码

视差效果

网页效果

<div class="swiper-slide">
  <div class="title" data-swiper-parallax="-100">从右边100px开始进入</div>
  <div class="subtitle" data-swiper-parallax="-200">从右边200px开始进入</div>
  <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
    <p>从右边300px开始进入，时间600ms</p>
  </div>
  <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
  <div data-swiper-parallax-scale="0.15" >缩放变化</div>
</div>
</div>
复制代码

var mySwiper = new Swiper('.swiper',{ parallax : true, })
复制代码

响应式设置

缩小放大网页宽度查看页面效果

breakpoints: {
    640: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    768: {
      slidesPerView: 4,
      spaceBetween: 40,
    },
    1024: {
      slidesPerView: 5,
      spaceBetween: 50,
    },
 },
复制代码

不是阶跃式的变化，而是逐渐变化，这样会对内容有较高的要求。

常用函数

其它应用

除了 slide 切换功能，swiper还可以用作滚动容器，有自定义滚动条。

使用 swiper 做轮播图

基本用法

分页器

立体效果

左右各露出一部分

缩略图控制

定位锚点

视差效果

响应式设置

常用函数

其它应用

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

使用 swiper 做轮播图

基本用法

分页器

立体效果

左右各露出一部分

缩略图控制

定位锚点

视差效果

响应式设置

常用函数

其它应用

热门文章

最新文章

相关电子书