vue3使用swiper

安装swiper

 npm i swiper@verson --save

 使用

<template>
  <Swiper>
    <SwiperSlide>1</SwiperSlide>
    <SwiperSlide>2</SwiperSlide>
    <SwiperSlide>3</SwiperSlide>
  </Swiper>
</template>

<script lang="ts" setup>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  import 'swiper/css/effect-cube';
  import 'swiper/css/pagination';
</script>

<style scoped lang="less">
  .swiper {
    width: 500px;
    height: 500px;
    margin: calc(50% - 250px) auto;
    .swiper-slide {
      background: yellow;
    }
  }
</style>

效果 

 效果配置

<template>
  <Swiper
    :effect="'cube'"
    :grabCursor="true"
    :loop="true"
    :cubeEffect="{
      shadow: true,
      slideShadows: true,
      shadowOffset: 30,
      shadowScale: 1,
    }"
    :pagination="true"
    :modules="[EffectCube, Pagination]"
  />
    
</template>

<script lang="ts" setup>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  import 'swiper/css/effect-cube';
  import 'swiper/css/pagination';

  // import required modules
  import { EffectCube, Pagination } from 'swiper';
</script>

效果

 

参考

Swiper Vue.js Components