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

最新推荐文章于 2024-11-01 22:47:12 发布

原创最新推荐文章于 2024-11-01 22:47:12 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

本文介绍了在Vue3项目中使用Vite和Swiper8时遇到的loop属性不显示轮播图的问题。通过详细的问题描述，提供了解决方法，即在样式中使用/deep/来穿透 scoped 属性，确保样式正确应用，从而实现轮播图的循环播放功能。

问题描述

在项目中使用到了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>