swiper.js循环显示

要在swiper.js中循环显示，需要将loop参数设置为true：

var swiper = new Swiper('.swiper-container', {
loop: true,
//其他参数
});

这将使swiper在到达最后一个滑块时自动循环回到第一个滑块。如果需要禁用自动循环，只需将loop参数设置为false即可。

相关问题

Swiper.js 怎么用

Swiper.js是一个用于创建滑动轮播图的JavaScript库。根据提供的引用内容，可以看出Swiper.js的使用方法有多种。

首先，可以通过安装Swiper库并引入Swiper和SwiperSlide组件来创建一个基本的Swiper轮播图。可以设置initialSlide属性来指定初始显示的幻灯片，设置loop属性来实现循环播放。通过onSlideChange和onSwiper属性可以监听滑动事件和获取Swiper实例。\[2\]

其次，可以使用Swiper的导航模块来添加导航按钮。通过设置navigation属性，可以指定上下滑动的导航按钮的类名，然后在对应的类名下添加图片元素作为导航按钮。\[3\]

最后，还可以使用Swiper的竖向滑动功能。通过设置direction属性为"vertical"，可以实现竖向滑动效果。可以使用slidesPerView属性来设置每次滑动显示的幻灯片数量，使用speed属性来设置滑动速度。可以通过onTouchEnd事件监听滑动结束，并根据滑动方向执行相应的操作。\[1\]

综上所述，Swiper.js可以通过安装和引入库、设置属性和事件监听来实现不同的功能，包括创建基本的轮播图、添加导航按钮和实现竖向滑动效果。
#### 引用[.reference_title]
- *1* *2* *3* [react 中 swiper.js 的使用](https://blog.csdn.net/weixin_44205605/article/details/119895387)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

swiper.js的使用

Swiper.js 是一个流行的轮播图插件，可以实现多种效果，如滑动、淡入淡出等。以下是使用 Swiper.js 的基本步骤：

1. 引入 Swiper.js 库

在 HTML 中引入 Swiper.js 库，可以使用 CDN 或下载到本地。例如：

<!-- CDN 引入 -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- 本地引入 -->
<link rel="stylesheet" href="path/to/swiper-bundle.min.css" />
<script src="path/to/swiper-bundle.min.js"></script>

2. 创建 HTML 结构

在 HTML 中创建轮播图的结构，例如：

<div class="swiper-container">
  <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-prev"></div>
  <div class="swiper-button-next"></div>
</div>

其中，`.swiper-container` 是容器，`.swiper-wrapper` 是轮播图的包裹元素，`.swiper-slide` 是每个轮播图的元素，`.swiper-pagination` 是轮播图的分页器，`.swiper-button-prev` 和 `.swiper-button-next` 是轮播图的前后按钮。

3. 初始化 Swiper

在 JavaScript 中初始化 Swiper，例如：

var mySwiper = new Swiper('.swiper-container', {
  // 选项
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

其中，`.swiper-container` 是轮播图容器的选择器，`loop` 表示是否循环播放轮播图，`pagination` 表示分页器的选项，`navigation` 表示前后按钮的选项。

以上是使用 Swiper.js 的基本步骤，可以根据需要设置更多选项和样式。