vue 使用swiper详细步骤

首先请参考下边这个连接，安装正确的swiper 特别说明一定是vue3，vue2使用是会报错的

vue3 中使用 swiper_@swiper_jjw_zyfx的博客-CSDN博客

其次：

<template>
        <swiper
            class="swiperWrap"
            :slides-per-view="3"
            :space-between="50"
            navigation
            :pagination="{ clickable: true }"
            :scrollbar="{ draggable: true }"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
            @slidePrevTransitionEnd = "onSlidePrevTransitionEnd"
            @slideNextTransitionEnd = "onSlideNextTransitionEnd"
        >
    <!--
        首先可以在  swiper 上设置高度和宽度
        :scrollbar="{ draggable: true }" 就是显示下边的横向的线的 
        暂时就发现个这，别的用法暂没试出来
        navigation 是用来控制向左和向右点击的那两个箭头按钮
        :pagination="{ clickable: true }" 是用来控制最底部的几个点的
        @slidePrevTransitionEnd 这个就是swiper中的官方文档中的事件（event）
        中的一个当滑块向前滚动结束后调用的方法，在vue中的用法就是如此
    -->
        <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-slide>Slide 6</swiper-slide>
        ...
    </swiper>

</template>
<script>
// Import Swiper Vue.js components
import SwiperCore, { Navigation,Virtual, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss'; // 用到那个导那个的包
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';

SwiperCore.use([Navigation, Virtual,Pagination, Scrollbar, A11y]);
export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    methods: {
        onSwiper(swiper) {
            console.log("111", swiper);
        },
        onSlideChange() {
            console.log('slide change');
        },
        onSlidePrevTransitionEnd(){
            console.log("向前滚动结束了")
        },
        onSlideNextTransitionEnd(){
            console.log("向后滚动结束了")
        },

    },
};
</script>
<style lang="scss">
    body{
        margin: 0;
    }
    .swiper-container {
        width: 100%;
        /*height: 300px;*/ /* 这个是用来控制整体的swiper的高度的如果只
        是用导航就写的小点，如果是用作轮播，就写的大点，总之根据你的需要来写*/
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: pink;
            height: 50px; // 这个就是控制中间滑块的高度的 如果不用做导航，可以设置成100%
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        /*点击它 进去就能找到如下原码，复制过来修改即可
          import 'swiper/components/navigation/navigation.scss';*/
        .swiper-button-prev,
        .swiper-container-rtl .swiper-button-next{
            left: 0;
            &:after {
                background-color: deeppink;
            }
        }
        .swiper-button-next,
        .swiper-container-rtl .swiper-button-prev{
            right: 0;
            &:after {
                background-color: deeppink;
            }
        }
    }
</style>

具体就是：

1、只用作导航效果如下：

swiper中的代码只修改如下部分

 css中的代码如下：

2、向做成轮播图的效果如下：

swiper中的只修改如下部分

css中的修改如下：

箭头的修改：

效果如下：

swiper中的事件的使用：

官网位置：

slideNextTransitionEnd(swiper)_Swiper参数选项

中的：

如果想要自动播放

设置如下：

 这样设置就能自动播放了，我猜测的根据文档如下所示：

经试验是这样用的：