如何在vue3中使用swiper7

曹え 5811 发布于:2022-02-09 03:12:48

第一步:安装


在你项目目录,执行安装swiper命令

npm i swiper


第二步:html


modules 里面是模块的数组


<template>
  <swiper
    :modules="[Navigation, Pagination, Scrollbar, Autoplay]"
		     :slides-per-view="3"
		     :space-between="50"
			 navigation
			 autoplay
			 loop
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper></template>


第三步:js 配置


<script setup>

 // 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';

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

 const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };

</script>


觉得有用请点个赞吧!
1 130