记录一次成功在vue3+vite使用swiper

原创已于 2023-06-09 16:12:06 修改

· 976 阅读

2 ·

版权

文章标签：

#javascript #vue.js #前端

于 2022-08-03 17:12:29 首次发布

安装依赖

npm i swiper

我使用的swiper版本： 7.3.1

使用代码

<template>
    <div class="page">
        <swiper
            :modules="modules"
            :slides-per-view="1"
            :space-between="50"
            :navigation="{ nextEl: '.bus-next',prevEl: '.bus-prev' }"
            :pagination="{ clickable: true }"
            :scrollbar="{ draggable: true }"
            :direction="vertical"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
        >
            <swiper-slide>Slide 1</swiper-slide>
            <swiper-slide>Slide 2</swiper-slide>
            <swiper-slide>Slide 3</swiper-slide>
        </swiper>
        <div class="swiper-btn">
             <div class="btn btn-prev bus-prev"></div>
             <div class="btn btn-next bus-next"></div>
        </div>
    </div>
</template>
<script>
    import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import 'swiper/css';
    import 'swiper/css/navigation';
    import 'swiper/css/pagination';
    import 'swiper/css/scrollbar'; 
    // import 'swiper/css/Direction'; 

    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],
            };
        },
    };
</script>
<style scoped>
.swiper-slide {
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: pink;
}
</style>