Swiper8在Vue3中使用loop不显示的解决方法

问题描述

在项目中使用到了Vite+Swiper8
版本为

vue使用Swiper8的入门教程请点击Vue+Vite使用Swiper8

因为其中需要用到 loop 循环播放轮播图，所以在使用时按照步骤：

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    :loop="true"
    navigation
    @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>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// import Swiper core and required modules
import { Navigation } from 'swiper';

// Import Swiper styles
import "swiper/css";
// 左右箭头
import 'swiper/css/navigation' 

const modules = [Navigation ];

const onSwiper = (swiper) => {
  console.log(swiper);
};
const onSlideChange = () => {
  console.log("slide change");
};
</script>

<style lang="less">
.swiper {
      .swiper-slide {
        height: 200px;
      }
    }
</style>

解决方法

写入如上后发现并没有 loop 后复制的部分并没有原来的样式，所以需要给样式加上deep。

在这里的 style 最好时加上 scope，防止污染。

<style scoped lang="less">
:deep(.swiper) {
      .swiper-slide {
        height: 200px;
      }
   }
</style>