vue3使用swiper

Posted 2022-04-22 GHUIJS

安装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