vue3中使用swiper7

https://blog.csdn.net/weixin_42063951/article/details/121354984

<template>

  <div class="home">

    <top-nav></top-nav>

    <swiper

      :modules="modules"

      :slides-per-view="1"

      :space-between="50"

      navigation

      :pagination="{ clickable: true }"

      :scrollbar="{ draggable: true }"

      @swiper="onSwiper"

      @slideChange="onSlideChange"

    >

      <swiper-slide>Slide 1</swiper-slide>

      <swiper-slide>Slide 2</swiper-slide>

      <swiper-slide>Slide 3</swiper-slide>

    </swiper>

  </div>

</template>

<script>

// @ is an alias to /src

import topNav from "@/components/topNav.vue";

// import Swiper core and required modules

import { Navigation, Pagination, Scrollbar, A11y } from "swiper";

// Import Swiper Vue.js components

import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";

// Import Swiper styles

import "swiper/swiper.min.css";

import "swiper/modules/navigation/navigation.min.css";

import "swiper/modules/pagination/pagination.min.css";

import "swiper/modules/scrollbar/scrollbar.min.css";

export default {

  name: "Home",

  components: {

    topNav,

    Swiper,

    SwiperSlide,

  },

  setup() {

    const onSwiper = (swiper) => {

      console.log(swiper);

    };

    const onSlideChange = () => {

      console.log("slide change");

    };

    return {

      onSwiper,

      onSlideChange,

      modules: [Navigation, Pagination, Scrollbar, A11y],

    };

  },

};

</script>

<template>

  <div class="home">

    <top-nav></top-nav>

    <swiper

      :modules="modules"

      :slides-per-view="1"

      :space-between="50"

      :pagination="{ clickable: true }"

      :autoplay="{

        delay: 3000,

        stopOnLastSlide: false,

        disableOnInteraction: true,

      }"

      @swiper="onSwiper"

      @slideChange="onSlideChange"

    >

      <swiper-slide>Slide 1</swiper-slide>

      <swiper-slide>Slide 2</swiper-slide>

      <swiper-slide>Slide 3</swiper-slide>

    </swiper>

  </div>

</template>

<script>

// @ is an alias to /src

import topNav from "@/components/topNav.vue";

// import Swiper core and required modules

import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from "swiper";

// Import Swiper Vue.js components

import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";

// Import Swiper styles

import "swiper/swiper.min.css";

import "swiper/modules/navigation/navigation.min.css";

import "swiper/modules/pagination/pagination.min.css";

import "swiper/modules/scrollbar/scrollbar.min.css";

export default {

  name: "Home",

  components: {

    topNav,

    Swiper,

    SwiperSlide,

  },

  setup() {

    const onSwiper = (swiper) => {

      console.log(swiper);

    };

    const onSlideChange = () => {

      console.log("slide change");

    };

    return {

      onSwiper,

      onSlideChange,

      modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay],

    };

  },

};

</script>

<style lang="less" scoped>

.home {

  .swiper{

    width: 7.1rem;

    display: flex;

    justify-content: center;

  }

  .swiper-wrapper {

    width: 7.1rem;

    display: flex;

    justify-content: center;

    .swiper-slide {

      line-height: 3rem;

      border-radius: 0.1rem;

      font-size: 0.3rem;

      text-align: center;

      background-color: pink;

    }

  }

}

</style>