vue3 配置swiper7

最新推荐文章于 2024-06-26 15:34:05 发布

weixin_44921956

最新推荐文章于 2024-06-26 15:34:05 发布

阅读量247

点赞数

分类专栏：记录文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44921956/article/details/126234527

版权

记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

npm i swiper

<template>
  <swiper
    direction="vertical"
    :slides-per-view="1"
    :mousewheel="true"
    :loop="true"
    :speed="200"
    :autoplay="true"
    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>
</template>
<script setup lang="ts">
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import SwiperCore, { Navigation, Pagination, Scrollbar, Mousewheel, Autoplay} from "swiper";

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';

  SwiperCore.use([ Navigation, Pagination, Scrollbar, Mousewheel, Autoplay, Navigation]);
 
  const onSwiper = (swiper: any) => {
     console.log(swiper);
  };
  const onSlideChange = () => {
     console.log('slide change');
  };
</script>