---
title: Swiper 轮播图
description: 轮播视图容器。
isComponent: true
usage: true
spline: message
author: { code: "swimly", doc: "swimly" }
---

## 基本用法

主要用于图片轮播显示，常用于新闻图片的轮播切换或者 banner 切换，可通过`direction`来控制轮播的方向，可选：`horizontal`和`vertical`。

> 注意：当设置垂直滚动时一定要设置`height`。

{{ base }}

## 自动轮播

通过`autoplay`属性可控制轮播图是否自动轮播，当设置为`true`的时候，还可以通过`stopOnHover`来设置是否鼠标移上去停止轮播。

{{ autoplay }}

## 无缝轮播(尚未实现)

通过开启`loop`，当轮播至最后一个的时候不会跳回到第一个，而是跟着后面继续轮播第一个。

{{ loop }}

## 切换模式

通过`animation`可设置轮播的效果，可选：`slide`，`fade`，默认为`slide`。

> 注意：当设置`fade`模式时，一定要设置`height`。

{{ animation }}

## 设置导航器位置

通过`navigation`可自定义导航器的配置，下面是该对象所有可配置参数详细介绍。

```javascript
{
  placement?: 'inside' | 'outside';
  showSlideBtn?: 'always' | 'hover' | 'never';
  size?: 'small' | 'medium' | 'large';
  type?: 'dots' | 'dots-bar' | 'bars' | 'fraction'
}
```

{{ navigation }}

## 卡片模式

通过`type`可设置轮播图的模式，可选：`default`，`card`。

> 提示：当设置卡片模式的时候，请添加`height`来控制容器高度。

{{ type }}
