乐趣区

关于vue.js:vue3中使用swiper8

jiezi

最新 swiper 应用记录

swiper 中文 API
swiper 英文版 API 倡议看此 API

“vue”: “^3.2.37”
“swiper”: “8.3.2”

  1. 装置

    npm i swiper
  2. 在组件中导入 swiper
import {Swiper, SwiperSlide} from "swiper/vue";
// 这是分页器和对应办法，swiper 如同在 6 的时候就曾经拆散了分页器和一些其余工具
import SwiperCore, {Autoplay, Navigation, Pagination, A11y} from "swiper";
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);
// 引入 swiper 款式，对应 css 如果应用 less 或者 css 只须要把 scss 改为对应的即可
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
const modules = [Autoplay, Pagination, Navigation, A11y];

特地阐明 SwiperCore 须要通过它来应用裸露的属性
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay])

  1. 在模板中应用
<template>
    <swiper
        :slidesPerView="1"
        :spaceBetween="30"
        :loop="true"
        :centeredSlides="true"
        :pagination="{clickable: true,}":autoplay="{
            delay: 1000,
            disableOnInteraction: false,
        }":navigation="true":modules="modules"class="mySwiper"ref="mySwiper"
    >
        <swiper-slide v-for="(item, index) in imgList" :key="index">
        <div style="width: 100%" class="flex">
            <img
            style="width: 100%; height: 100%"
            :src="item"
            />
        </div>
        </swiper-slide>
    </swiper>
</template>
<script setup>
    // 这是分页器和对应办法，swiper 如同在 6 的时候就曾经拆散了分页器和一些其余工具
    import SwiperCore, {Autoplay, Navigation, Pagination, A11y} from 'swiper';
    const modules = [Autoplay, Pagination, Navigation, A11y];
    import 'swiper/css'
    import 'swiper/css/navigation'
    // import 'swiper/css/pagination'
    // import 'swiper/css/bundle'
    const imgList = ref(['https://www.baidu.com/img/bdlogo.png'])
</script>
  1. 局部参数阐明：
    :slidesPerView=”1″ // 每页显示几个
    :spaceBetween=”30″ // 每个间距是多少
    :loop=”true” // 循环滚动
    :centeredSlides=”true” // 值为【false】时左对齐，默认就是左对齐，值为【true】时居中对齐
    :pagination=”{
    clickable: true,
    }”// 点击分页圆点是否切换
    :autoplay=”{
    delay: 1000,
    disableOnInteraction: false,
    }”// 设置多少毫秒会执行一次动画（能够了解为：翻页 / 切换）
    :navigation=”true” // 左右切换箭头
  2. 自定义箭头（留神点）

通过应用以下导入并且应用

import {useSwiper} from 'swiper/vue';
const swiper = useSwiper();
<button @click="swiper.slideNext()">next</button>

后果是未找到 slideNext 办法，大抵看了下源码貌似没暴露出此办法，也或者是应用办法不对，有晓得的评论留言哈

最初不在折腾，换了种形式 (通过 ref) 能拿到对应属性

const mySwiper = ref<null | HTMLElement>(null)
// 获取 swiper 属性
mySwiper.value?.$el.swiper
mySwiper.value?.$el.swiper.slideNext()
退出移动版