解决 Swiper.js 无限滚动（跑马灯）手动滑动后会干扰移动效果

### 预期效果

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

### 解决办法就是：

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

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

** freeMode** 参数：

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

### JS 代码：

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

```js
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 代码例子：
```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>

// 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>
```

添加新评论

最新文章

最近回复

分类

归档

其它