现在网|现在博客-分享、记录生活的点滴

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

作者: Chuwen
时间: 2021-11-30
分类: JavaScript
评论

### 预期效果

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

### 解决办法就是：

设置 `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>
```

使用 JPEGTRAN 生成 jpg 渐进式图片 - 在 Mac or Unix/Linux 系统安装 JPEGTRAN

作者: Chuwen
时间: 2021-11-23
分类: Linux
评论

腾讯云 3 年 198 元云服务器 2核CPU、4GB内存 80GB SSD云硬盘

作者: Chuwen
时间: 2021-11-12
分类: 唠嗑闲聊
评论

执行命令 `goaccess -a -d -f www.xxxx.com_access_2021-11-09_145601.log -o ~/Downloads/go-access.html` 报以下错误：

作者: Chuwen
时间: 2021-11-09
分类: Linux
评论

### 执行命令 `goaccess -a -d -f www.xxxx.com_access_2021-11-09_145601.log -o ~/Downloads/go-access.html` 报以下错误：

```
➜  Downloads goaccess -a -d -f www.xxxx.com_access_2021-11-09_145601.log -o ~/Downloads/go-access.html
 [SETTING UP STORAGE www.xxxxxx.com_access_2021-11-09_145601.log] {0} @ {0/s}
==47696== GoAccess - Copyright (C) 2009-2020 by Gerardo Orellana
==47696== https://goaccess.io - <hello@goaccess.io>
==47696== Released under the MIT License.
==47696==
==47696== FILE: www.xxxxxxxx.com_access_2021-11-09_145601.log
==47696== 已解析 10 行 出现以下错误:
==47696==
==47696== Token '08/Nov/2021' doesn't match specifier '%d'
==47696== Token '08/Nov/2021' doesn't match specifier '%d'
==47696== Token '08/Nov/2021' doesn't match specifier '%d'
==47696== Token '08/Nov/2021' doesn't match specifier '%d'
==47696== Token '08/Nov/2021' doesn't match specifier '%d'
==47696== Token '08/Nov/2021' doesn't match specifier '%d'
==47696== Token '08/Nov/2021' doesn't match specifier '%d'
==47696== Token '08/Nov/2021' doesn't match specifier '%d'
==47696== Token '08/Nov/2021' doesn't match specifier '%d'
==47696== Token '08/Nov/2021' doesn't match specifier '%d'
==47696==
==47696== 格式错误 - 请检查你的日志/日期/时间格式
```

### `~/.goaccessrc` 配置文件内容

```
time-format %H:%M:%S
date-format %d/%b/%Y
log-format %h %^[%d:%t %^] "%r" %s %b
```

### 解决方案

参考：https://github.com/allinurl/goaccess/issues/1563
将语言环境变量设置为英语即可

```
LANG="en_US.UTF-8"
goaccess -a -d -f www.xxxx.com_access_2021-11-09_145601.log -o ~/Downloads/go-access.html

# 或者

LANG="en_US.UTF-8" bash -c 'goaccess -a -d -f www.xxxx.com_access_2021-11-09_145601.log -o ~/Downloads/go-access.html'
```

Docker for Windows (使用 WSL 2)更改最大使用内存、CPU 核心数量

作者: Chuwen
时间: 2021-10-30
分类: Windows,Docker
评论

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

使用 JPEGTRAN 生成 jpg 渐进式图片 - 在 Mac or Unix/Linux 系统安装 JPEGTRAN

腾讯云 3 年 198 元云服务器 2核CPU、4GB内存 80GB SSD云硬盘

执行命令 `goaccess -a -d -f www.xxxx.com_access_2021-11-09_145601.log -o ~/Downloads/go-access.html` 报以下错误：

Docker for Windows (使用 WSL 2)更改最大使用内存、CPU 核心数量

最新文章

最近回复

分类

归档

其它