vue3轮播图怎么做

最新推荐文章于 2024-07-10 17:34:18 发布

可峰科技

最新推荐文章于 2024-07-10 17:34:18 发布

阅读量431

点赞数 2

分类专栏： Nuxt3 文章标签： vue

本文链接：https://blog.csdn.net/windxf/article/details/139716882

版权

Nuxt3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

先看效果
在这里插入图片描述
实现代码

<n-carousel
  effect="card"
  dot-type="line"
  draggable
  :autoplay="!isHovered"
  :current-index="currentIndex"
  prev-slide-style="transform: translateX(-150%) translateZ(-450px);opacity:1"
  next-slide-style="transform: translateX(50%) translateZ(-450px);opacity:1"
  style="height: 250px"
  :show-dots="true"
>
  <n-carousel-item
    v-for="item in banners"
    :key="item.imageUrl"
    :style="{ width: '50%' }"
  >
    <load-img
      loading-height="250px"
      class-name="w-full h-full rounded cursor-pointer cover-banner"
      :src="item.imageUrl"
    />
  </n-carousel-item>
</n-carousel>