import{c as t,o as e,B as o}from"./vendor.36ea9f7d.js";const i={class:"markdown-body"},d=o('

Swiper 轮播图组件

介绍

常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。

安装

import { createApp } from 'vue';\nimport { Swiper } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Swiper);\n

代码演示

基础用法

auto-play 自动轮播的时长 init-page 初始索引值 pagination-visible 是否显示分页指示器 pagination-color 指示器颜色自定义

<nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/152158/32/19170/280589/6035429fE08208901/024578cf04ce3b47.jpg!cr_1125x445_0_171" alt="" />\n  </nut-swiper-item>\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg" alt="" />\n  </nut-swiper-item>\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg" alt="" />\n  </nut-swiper-item>\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg!cr_1125x445_0_171" alt="" />\n  </nut-swiper-item>\n</nut-swiper>\n

自定义大小

width 自定义轮播大小

<nut-swiper :init-page="state.page2" :loop="false" width="300">\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/152158/32/19170/280589/6035429fE08208901/024578cf04ce3b47.jpg!cr_1125x445_0_171" alt="" />\n  </nut-swiper-item>\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg" alt="" />\n  </nut-swiper-item>\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg" alt="" />\n  </nut-swiper-item>\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg!cr_1125x445_0_171" alt="" />\n  </nut-swiper-item>\n</nut-swiper>\n

自定义分页指示器

v-slot:page 表示自定义指示器

<nut-swiper :init-page="state.page3" :loop="true" @change="change">\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/152158/32/19170/280589/6035429fE08208901/024578cf04ce3b47.jpg!cr_1125x445_0_171" alt="" />\n  </nut-swiper-item>\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg" alt="" />\n  </nut-swiper-item>\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg" alt="" />\n  </nut-swiper-item>\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg!cr_1125x445_0_171" alt="" />\n  </nut-swiper-item>\n  <template v-slot:page>\n    <div class="page"></div>\n  </template>\n</nut-swiper>\n

垂直方向

direction 自定义轮播方向

<nut-swiper :init-page="state.page4" :loop="true" auto-play="3000" direction="vertical" height="150" :pagination-visible="true" style="height: 150px">\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/152158/32/19170/280589/6035429fE08208901/024578cf04ce3b47.jpg!cr_1125x445_0_171" alt="" />\n  </nut-swiper-item>\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg" alt="" />\n  </nut-swiper-item>\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg" alt="" />\n  </nut-swiper-item>\n  <nut-swiper-item>\n    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg!cr_1125x445_0_171" alt="" />\n  </nut-swiper-item>\n</nut-swiper>\n

API

Props

参数	说明	类型	默认值
width	轮播卡片的宽度	Number、String	window.innerWidth
height	轮播卡片的高度	String、Number	0
direction	轮播方向,可选值`horizontal`,`vertical`	String	‘horizontal’
pagination-visible	分页指示器是否展示	Boolean	false
pagination-color	分页指示器选中的颜色	String	‘#fff’
loop	是否循环轮播	Boolean	true
duration	动画时长（单位是ms）	Number、String	500
auto-play	自动轮播时长，0表示不会自动轮播	Number、String	0
init-page	初始化索引值	Number、String	0
touchable	是否可触摸滑动	Boolean	true
is-preventDefault	滑动过程中是否禁用默认事件	Boolean	true
is-stopPropagation	滑动过程中是否禁止冒泡	Boolean	true

Events

事件名	说明	回调参数
change	滑动之后的回调	当前索引值index

API

事件名	说明	参数
prev	切换到上一页	-
next	切换到下一页	-
to	切换到指定轮播	index:number

',25),u={expose:[],setup:o=>(o,u)=>(e(),t("div",i,[d]))};export default u;

Swiper 轮播图 组件

介绍

安装