import{c as t,o,C as e}from"./vendor.0d0a34e4.js";const u={class:"markdown-body"},i=e('<h1>Swiper 轮播</h1><h3>介绍</h3><p>常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from &#39;vue&#39;;\nimport { Swiper } from &#39;@nutui/nutui-taro&#39;;\n\nconst app = createApp();\napp.use(Swiper);\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><p><code>autoplay</code> 是否自动切换 <code>interval</code> 自动切换时间间隔 <code>current</code> 当前所在滑块的 index <code>indicator-dots</code> 是否显示面板指示点 <code>indicator-color</code> 指示点颜色</p><pre><code class="language-html">&lt;nut-swiper current=&quot;1&quot; indicator-dots=&quot;true&quot; indicator-color=&quot;#426543&quot; autoplay=&quot;true&quot; interval=&quot;3000&quot;&gt;\n   &lt;nut-swiper-item&gt;\n    &lt;img src=&quot;https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg&quot; alt=&quot;&quot; /&gt;\n  &lt;/nut-swiper-item&gt;\n  &lt;nut-swiper-item&gt;\n    &lt;img src=&quot;https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg&#39;&quot; alt=&quot;&quot; /&gt;\n  &lt;/nut-swiper-item&gt;\n  &lt;nut-swiper-item&gt;\n    &lt;img src=&quot;https://storage.360buyimg.com/jdc-article/welcomenutui.jpg&quot; alt=&quot;&quot; /&gt;\n  &lt;/nut-swiper-item&gt;\n  &lt;nut-swiper-item&gt;\n    &lt;img src=&quot;https://storage.360buyimg.com/jdc-article/fristfabu.jpg&quot; alt=&quot;&quot; /&gt;\n  &lt;/nut-swiper-item&gt;\n&lt;/nut-swiper&gt;\n</code></pre><h3>自定义大小</h3><p><code>previous-margin</code> 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 <code>next-margin</code> 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值</p><pre><code class="language-html">&lt;nut-swiper previous-margin=&quot;10px&quot; next-margin=&quot;10px&quot;&gt;\n   &lt;nut-swiper-item&gt;\n    &lt;img src=&quot;https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg&quot; alt=&quot;&quot; /&gt;\n  &lt;/nut-swiper-item&gt;\n  &lt;nut-swiper-item&gt;\n    &lt;img src=&quot;https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg&#39;&quot; alt=&quot;&quot; /&gt;\n  &lt;/nut-swiper-item&gt;\n  &lt;nut-swiper-item&gt;\n    &lt;img src=&quot;https://storage.360buyimg.com/jdc-article/welcomenutui.jpg&quot; alt=&quot;&quot; /&gt;\n  &lt;/nut-swiper-item&gt;\n  &lt;nut-swiper-item&gt;\n    &lt;img src=&quot;https://storage.360buyimg.com/jdc-article/fristfabu.jpg&quot; alt=&quot;&quot; /&gt;\n  &lt;/nut-swiper-item&gt;\n&lt;/nut-swiper&gt;\n</code></pre><h3>垂直方向</h3><p><code>vertical</code> 滑动方向是否为纵向</p><pre><code class="language-html">&lt;nut-swiper vertical=&quot;true&quot;&gt;\n    &lt;nut-swiper-item&gt;\n    &lt;img src=&quot;https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg&quot; alt=&quot;&quot; /&gt;\n  &lt;/nut-swiper-item&gt;\n  &lt;nut-swiper-item&gt;\n    &lt;img src=&quot;https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg&#39;&quot; alt=&quot;&quot; /&gt;\n  &lt;/nut-swiper-item&gt;\n  &lt;nut-swiper-item&gt;\n    &lt;img src=&quot;https://storage.360buyimg.com/jdc-article/welcomenutui.jpg&quot; alt=&quot;&quot; /&gt;\n  &lt;/nut-swiper-item&gt;\n  &lt;nut-swiper-item&gt;\n    &lt;img src=&quot;https://storage.360buyimg.com/jdc-article/fristfabu.jpg&quot; alt=&quot;&quot; /&gt;\n  &lt;/nut-swiper-item&gt;\n&lt;/nut-swiper&gt;\n</code></pre><h4>API <a href="https://docs.taro.zone/docs/components/viewContainer/swiper">参考文档</a></h4>',16),r={setup:e=>(e,r)=>(o(),t("div",u,[i]))};export default r;