1、npm install swiper

2、引入

import { Swiper, SwiperSlide } from 'swiper/vue';

import { Mousewheel, Pagination } from "swiper";

import 'swiper/css';

import "swiper/css/pagination";

3、获取

const c_swiper = document.getElementsByClassName("_swiper")

console.log(c_swiper[0].swiper.activeIndex)

4、代码 

//html
<swiper class="_swiper" :slides-per-view="1" :direction="'vertical'" :modules="[Mousewheel,Pagination]"
    :mousewheel="true" :pagination="{
      clickable: true,
    }" @swiper="onSwiper" @slideChange="onSlideChange()">


    <swiper-slide>111</swiper-slide>
</swiper>


// swiper
function onSwiper(swiper) {
}

const c_swiper = document.getElementsByClassName("_swiper")
const swiperIdx = ref(0)

function onSlideChange() {
    swiperIdx.value = c_swiper[0].swiper.activeIndex
}

Logo

前往低代码交流专区

更多推荐