vue3 + vite + ts 安装使用 swiper(效果图在最后)

项目中需要一个轮播图,但是又不需要自动播放,而且能在移动端能滑动切换,所以就想到了用swiper,本来如果在pc端的话,只要使用element里面的走马灯组件就可以了.但是element走马灯不兼容移动端的滑动切换.

网上找了很多相关的文章,但是因为版本的问题都不能正常引入插件的css报错,导致不能正常使用,最终摸索出来一个能使用的版本,希望能给大家带来帮助

1.安装 swiper (一定要指定版本!!!)

npm install swiper@7.4.1

 2.在组件中引用(vue代码)

<template>
  <Swiper
      :modules="modules"
      @swiper="onSwiper"
      :slidesPerView="4.3"
      :autoplay="{ delay: 2500, disableOnInteraction: true }"
      :loop="false"
      :space-between="10"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
  </Swiper>
</template>

3.在组件中使用(ts代码) 

<script setup lang="ts">
import {toRaw, onMounted} from 'vue'
import {Swiper, SwiperSlide} from "swiper/vue";
import {Navigation, Pagination, Scrollbar, A11y} from 'swiper';
import "swiper/css";

const modules = [Navigation, Pagination, Scrollbar, A11y];

const onSwiper = (swiper: any) => {
  console.log(swiper);
};
</script>

4.一些css样式(可以自定义,这里只做示范) 

.swiper-slide {
  height: 100px;
  line-height: 100px;
  font-size: 30px;
  text-align: center;
  background-color: pink;
}

.swiper::v-deep .swiper-pagination .swiper-pagination-bullet {
  background: rgb(255, 255, 255);
}

.swiper::v-deep .swiper-pagination .swiper-pagination-bullet-active {
  background: rgb(255, 255, 255);
}

 5.效果图(右侧是打印的一些信息)

以上就是swiper在vue3+vite+ts项目的配置和使用,谢谢一件三连哦~~