Vue3.0中使用swiper

Vue3.0中使用swiper

安装swiper 轮播插件

npm install swiper --save

引入相关依赖

import SwiperCore, { Autoplay, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper-bundle.min.css';
SwiperCore.use([Autoplay, Pagination]);

项目中使用swiper

<template>
  <swiper
    :autoplay="swiper_options.autoplay"
    :loop="swiper_options.loop"
    :width="swiper_options.width"
    :height="swiper_options.height"
    :speed="swiper_options.speed"
    :pagination="swiper_options.pagination"
    :allowTouchMove="swiper_options.allowTouchMove"
    @swiper="onSwiper"
    ref="mySwiper"
  >
    <swiper-slide>1</swiper-slide>
    <swiper-slide>2</swiper-slide>
    <swiper-slide>3</swiper-slide>
    <swiper-slide>4</swiper-slide>
  </swiper>
</template>
<script>
import { onMounted, reactive } from 'vue';
import SwiperCore, { Autoplay, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper-bundle.min.css';
SwiperCore.use([Autoplay, Pagination]);

export default {
  name: 'Home',
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    let swiper_options = reactive({
      autoplay: {
        disableOnInteraction: false,
        delay: 3000,
      },
      loop: true,
      width: undefined,
      height: 600,
      allowTouchMove: false,
      lazy: true,
      observer: true,
      observeParents: true,
      observeSlideChildren: true,
      pagination: {
        clickable: true,
        bulletActiveClass: 'my-bullet-active',
      },
    });
    let swiperObject = null;
    const onSwiper = (swiper) => {
      swiperObject = swiper;
    };

    onMounted(() => {
      swiperObject.on('slideChange', (e) => {
        console.log(e.activeIndex);
      });
    });

    return { swiper_options, onSwiper };
  },
};
</script>