使用swiper.js插件制作列表无缝匀速滚动效果

春风与柳叶

已于 2023-05-23 10:22:42 修改

阅读量3.1k

点赞数 2

分类专栏：功能实现文章标签：前端 javascript vue html

于 2023-01-13 11:50:16 首次发布

本文链接：https://blog.csdn.net/weixin_56927228/article/details/128671728

版权

功能实现专栏收录该内容

2 篇文章 1 订阅

订阅专栏

列表匀速无缝循环播放

使用以下方法建议安装swiper 5.4.5版本！！！

一、原生html实现方法

二、vue2实现方法

一、原生html实现方法

废话不多说直接上代码（注意看我加注释的地方）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title></title>
  <link rel="stylesheet" href="./css//swiper-bundle.min.css">

  </div>
</head>

<body>
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">1</div>
      <div class="swiper-slide">2</div>
      <div class="swiper-slide">3</div>
      <div class="swiper-slide">4</div>
      <div class="swiper-slide">5</div>
      <div class="swiper-slide">6</div>
      <div class="swiper-slide">7</div>
      <div class="swiper-slide">8</div>
      <div class="swiper-slide">9</div>
      <div class="swiper-slide">10</div>
    </div>
</body>
<style>
  .swiper {
    width: 600px;
    height: 300px;
    border: 1px solid #000;
  
  }

  .swiper-slide {
    border: 1px;
    background-color: aqua;
    color: #fff;
  }


  .swiper-wrapper {  
    /* 这里是改变其动画效果为匀速形式，不加此样式的话会造成滚动卡顿，看起来效果不平滑 */
    /* 样式做了各种浏览器的兼容 */
    transition-timing-function:linear !important;
    -webkit-transition-timing-function: linear !important;   
	  -moz-transition-timing-function: linear !important;
	  -ms-transition-timing-function: linear !important;
	  -o-transition-timing-function: linear !important;
	  transition-timing-function: linear !important;
  }
</style>
<script type="text/javascript" src="./js/swiper-bundle.min.js"></script>
<script>
  var mySwiper = new Swiper('.swiper', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    loopPreventsSlide: true,//当swiper 正在过渡时，阻止slide 前进后退的切换操作
    observer: true,
    observeParents: true,
    slidesPerView: 5, //swiper容器同时展示的元素数量
    spaceBetween: 20, //元素之间间隔距离
    speed: 2000,  //slider自动滑动开始到结束的时间
    autoplay: {//开启自动切换
      delay: 0,//自动切换的时间间隔
      stopOnLastSlide: false,//当切换到最后一个slide时停止自动切换
      disableOnInteraction: false,//用户操作swiper之后，是否停止自动切换效果
    },
  })   
</script>

</html>

二、vue2实现方法

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in visiterList" :key="index">
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  name: 'SwiperList',
  data() {
    return {
      visiterList: [
        {
          name: '人员1',
          visitTime: '2023-4-27 12:30:00',
          state: 1
        },
        {
          name: '人员2',,
          visitTime: '2023-4-27 8:30:00',
          state: 2
        },
        {
          name: '人员3',
          visitTime: '2023-4-27 8:30:00',
          state: 2
        },
        {
          name: '人员4',
          visitTime: '2023-4-27 8:30:00',
          state: 2
        }
      ]
    }
  },
  mounted() {
    var swiper = new Swiper('.swiper-container', {
      direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      loopPreventsSlide: true, // 当swiper 正在过渡时，阻止slide 前进后退的切换操作
      observer: true,
      observeParents: true,
      slidesPerView: 2, // swiper容器同时展示的元素数量
      spaceBetween: 20, // 元素之间间隔距离
      speed: 5000, // slider自动滑动开始到结束的时间
      autoplay: {
        // 开启自动切换
        delay: 0, // 自动切换的时间间隔
        stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换
        disableOnInteraction: false // 用户操作swiper之后，是否停止自动切换效果
      }
    })
  }
}
</script>

<style>
.swiper-container {
  /* width: 600px; */
  height: 500px;
  border: 1px solid #e8e8e8;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #f5f6f8;
}
.swiper-wrapper {
  padding: 10px;
  box-sizing: border-box;
}
.swiper-slide {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 12px #ebedf0;
  margin-bottom: 24px;
  padding: 24px;
}

.swiper-wrapper {
  /* 这里是改变其动画效果为匀速形式，不加此样式的话会造成滚动卡顿，看起来效果不平滑 */
  /* 样式做了各种浏览器的兼容 */
  transition-timing-function: linear !important;
  -webkit-transition-timing-function: linear !important;
  -moz-transition-timing-function: linear !important;
  -ms-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}
</style>