# Swiper 轮播图

该组件一般用于导航轮播，广告展示等场景,可开箱即用，具有如下特点：

• 自定义指示器模式，可配置指示器样式
• 3D轮播图效果，满足不同的开发需求
• 可配置显示标题，涵盖不同的应用场景

# 平台差异说明

# 基本使用

通过list参数传入轮播图列表值，该值为一个数组，元素为对象，也可以是图片路径字符串，见如下：

• list的name参数对应的值为属性轮播图的图片路径
• list的titleName参数对应的值为属性为需要显示的标题，需要显示标题需要将title设置为true

<template>
  <tn-swiper :list="list"></tn-swiper>
</template>

<style>
  export default {
    data() {
      list: [
        {image: 'xxx.jpg', title: 'xxx'},
        {image: 'xxx.jpg', title: 'xxx'},
      ]
    }
  }
</style>

# 设置指示器类型

通过配置mode参数即可，有如下：

• rect-指示器为方块状
• dot-指示器为圆点
• number-指示器为数字
• round-激活的指示器为块状，未激活的未点状，为默认值
• none或者为空-不显示指示器

通过indicatorPosition参数配置指示器的位置，有如下值：

• topLeft-指示器位于左上角
• topCenter-指示器位于上方中间位置
• topRight-指示器位于右上角
• bottomLeft-指示器位于左下角
• bottomCenter-指示器位于底部中间位置，为默认值
• bottomRight-指示器位于右下角

<tn-swiper :list="list" mode="rect" :indicatorPosition="bottomLeft"></tn-swiper>

# 设置3D轮播效果

配置effect3d为true即可，此时左右两边以缩略形式预览前后一个swiper-item的一部分。

<tn-swiper :list="list" :effect3d="true"></tn-swiper>

# API

# Props

# Slots

# Event