使用 swiper 做轮播图-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用 swiper 做轮播图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

swiper自动轮播,web前端,前端,javascript

大好好，我是 17。
虽然我是一个喜欢造轮子的人，但是对于 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自动轮播,web前端,前端,javascript

.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自动轮播,web前端,前端,javascript

.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后，左右两边就会有一部分显示出来。

缩略图控制

swiper自动轮播,web前端,前端,javascript

 <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,
    },
 },