How to solve the problems encountered when using swiper in vue3

1. Install swiper

Use npm install swiper to install the swpier plug-in

npm install swiper -s // @9.2.0
// 或者安装指定版本
npm install swiper@8.4.7 -s

2. Use swiper

Directly follow the reference method on the official website, the project will report an error

Solution:
Introduced components use the following path

import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue";
import "swiper/swiper.min.css";

Sometimes you need to use some other component APIs, such as:

<template>
  <swiper
    class="swpier"
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    loop="true"
    direction="horizontal"
    navigation
    :autoplay="{
      delay: 2000,
      disableOnInteraction: false,
      pauseOnMouseEnter: true,
    }"
    :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-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
  </swiper>
</template>
<script>
// Navigation: 方向箭头：向左，向右
/* Pagination: 轮播小圆点
clickable: 如果为true，则单击分页按钮将跳转到对应的slide。仅适用于项目符号分页类型
*/
/* Scrollbar: 滚动条
draggable: 设置为true可使滚动条可拖动，从而控制滑块位置
*/
/* AutoPlay: 自动轮播
delay: 转换之间的延迟（毫秒）。如果未指定此参数，将禁用自动播放
disableOnInteraction：设置为false，用户交互（滑动）后自动播放不会被禁用，每次交互后都会重新启动
pauseOnMouseEnter：启用后，指针（鼠标）在Swiper容器上输入时将暂停自动播放。
*/

import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue";
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";
import "swiper/modules/autoplay/autoplay.min.css";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay],
    };
  },
};

Among them:

loop: Whether to loop: true/false
direction: carousel direction "horizontal"/"vertical", default "horizontal"
slides-per-view: control how many slides are displayed at a time Carousel images
space-between: The distance between each carousel image. This attribute cannot be used with the margin attribute at the same time;

3. echarts swiper

Project background

Need to display and include different echarts in each carousel item of swiper, and turn on loop:true loop

"echarts": "^5.4.0"
"swiper" : "^9.2.0"

Problem description:

After turning on loop: true, the first and last echarts cannot be rendered normally

Cause:

loop: After true, swiper will copy the same slide before and after to ensure the loop effect. The ID used during initialization is not unique, causing the echarts initialization to be invalid.

Solution:

// 通过class获取dom，并在循环时初始化，为了保证echarts初始化时dom已经更新渲染，加一个setTimeout函数
 setTimeout(() => {
  const myEchart = document.getElementsByClassName(classname);
  let chart = null;
  Array.prototype.forEach.call(myEchart, function (element, i, arr) {
    element.setAttribute("_echarts_instance_", "");
    chart = echarts.init(element);
    console.log(arr);
    chart.setOption(optionArr[i]);
  });
})

Or use for (let i = 0; i

Note: for (let i in myEchart) {} cannot be used here, otherwise an error will be reported as follows:

The above is the detailed content of How to solve the problems encountered when using swiper in vue3. For more information, please follow other related articles on the PHP Chinese website!