swiper轮播组件在vue3中的使用

最新推荐文章于 2025-03-23 20:32:14 发布

四维虫子chenjd

最新推荐文章于 2025-03-23 20:32:14 发布

阅读量659

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/m0_51499501/article/details/131187979

版权

依赖下载：
npm i swiper

main.ts引入样式：
import ‘swiper/swiper-bundle.css’

使用：

<swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="0"
    navigation
    :scrollbar="{ draggable: true }"
     :observer="true"
     :observeParents="true"
     :autoplay="{
         delay: 1000,
         pauseOnMouseEnter: true,
         disableOnInteraction: false
      }"
>                    
      <swiper-slide  v-for="(item, index) in data" :key="index">
          <div class="service-centre-item">
                  <div>{{ item.name }}</div>
          <div>
          <span>{{ item.data }}</span>
          <span>{{ getUnit(item.name) }}</span>
      </div>
      </div>
   </swiper-slide>                        
</swiper>

<script setup lang='ts'>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Scrollbar, Autoplay } from 'swiper';

const modules: any = ref([Navigation, Scrollbar, Autoplay])
</script>  

<style scoped lang='less'>
.swiper{
    --swiper-theme-color: @sub-color;/* 设置Swiper风格 */
    --swiper-navigation-color: @sub-color;/* 单独设置按钮颜色 */
    --swiper-navigation-size: 14px;/* 设置按钮大小 */
    :deep(.swiper-scrollbar-horizontal) {
        background: transparent;
    }
    :deep(.swiper-scrollbar-drag) {
        background: #ececec;
    }
    padding-bottom: 14px;
} 
</style>