标签 跑马灯 下的文章

预期效果

向左、向右滑动后，松开鼠标/手，必须按照初始移动方向移动，并且移动速度不能有太大的变化

解决办法就是：

设置 freeMode.momentumRatio 设置的小一点，比如 0.01
设置 freeMode.momentumBounce 为 false

在线预览：https://codepen.io/printnow/pen/ZEXEajW

freeMode 参数：

参数 类型 默认值 备注
enabled `boolean FreeModeOptions` 启用自由模式功能。对象的自由模式参数或布尔值为 true 以启用默认设置。
minimumVelocity number 0.02 触发自由模式动量所需的最小接触移动速度
momentum boolean true 如果启用，则在释放滑块后，滑块将继续移动一段时间
momentumBounce boolean true 如果要在自由模式下禁用动量反弹，请设置为 false
momentumBounceRatio number 1 值越大，动量反弹效应越大
momentumRatio number 1 释放滑块后，该值越大，动量距离越大
momentumVelocityRatio number 1 释放滑块后，该值越高，动量速度越大
sticky boolean false 设置为 true 可在自由模式(freeMode)下启用捕捉幻灯片位置

JS 代码：

如果你是按照模块导入的，一定要导入 FreeMode 模块！

import 'swiper/css';
import Swiper, {Autoplay, FreeMode} from 'swiper';

Swiper.use([Autoplay, FreeMode]);

let itemCount = parseInt(u('.swiper-wrapper').data('item-count'));

const swiper = new Swiper("#reviews-list", {
  width: window.innerWidth,
  resistanceRatio: 0,
  speed: 10000,
  observer: true,
  observeParents: true,
  slidesPerGroup: 1,

  // autoplay
  autoplay: {
    delay: 0, // 每个图片移动完成后间隔
    disableOnInteraction: false // 触摸后是否停止自动移动
  },

  freeMode: {
    enabled: true,
    momentumBounce: false,//主要是这2个参数
    momentumRatio: 0.01//主要是这2个参数
  }, // 不贴合

  // loop
  loop: true, // 循环

  // grid
  centeredSlides: true,
  slidesPerView: 'auto',//5
  spaceBetween: 25,
  loopedSlides: itemCount,
  loopAdditionalSlides: itemCount,
});

HTML 代码例子：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Swiper.js 无限跑马灯</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@7.3.1/swiper-bundle.min.css"/>
  <script src="https://cdn.jsdelivr.net/npm/swiper@7.3.1/swiper-bundle.min.js"></script>
  <style>
    #review-list {
      width: 100%;
      height: 100%;
    }

    .review-item {
      width: 300px;
      height: 180px;
      background-color: #ff4081;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  </style>
</head>
<body>

<div id="review-list">
  <div class="swiper-wrapper">
    <div class="review-item swiper-slide">评论1</div>
    <div class="review-item swiper-slide">评论2</div>
    <div class="review-item swiper-slide">评论3</div>
    <div class="review-item swiper-slide">评论4</div>
    <div class="review-item swiper-slide">评论5</div>
    <div class="review-item swiper-slide">评论6</div>
    <div class="review-item swiper-slide">评论7</div>
    <div class="review-item swiper-slide">评论8</div>
    <div class="review-item swiper-slide">评论9</div>
    <div class="review-item swiper-slide">评论10</div>
  </div>
</div>

<script>
  const swiper = new Swiper("#review-list", {
    width: window.innerWidth,
    resistanceRatio: 0,
    speed: 10000,
    observer: true,
    observeParents: true,
    slidesPerGroup: 1,

    // autoplay
    autoplay: {
      delay: 0, // 每个图片移动完成后间隔
      disableOnInteraction: false // 触摸后是否停止自动移动
    },

    freeMode: {
      enabled: true,
      momentumBounce: false,
      momentumRatio: 0.01,
      momentumVelocityRatio: 0.01
    }, // 不贴合

    // loop
    loop: true, // 循环

    // grid
    centeredSlides: true,
    slidesPerView: 'auto',//5
    spaceBetween: 25,
  });
</script>
</body>
</html>