VUE 3.0 使用 swiper 轮播图插件

mengheeh

不喜勿喷, 大佬绕道

第一步, 先安装 swiper 插件, 命令: npm i swiper

第二步, 引入使用, 这块有很大的问题.
首先 VUE 3.0 已经不支持 Vue.use();  这种写法了, 大家不要跳这个坑了.
网上百度到的全部让你这样弄, 一弄一个坑.

关于修改 分页器 样式的
加上深度修改 /deep/ 或者 >>>



贴上成品

[HTML] 纯文本查看 复制代码

<template>
    <div class="swiperComponent">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(items, key) in swiperList" :key="key">
                    <div class="swiper-BgMap" :style="{ backgroundImage: 'url('+ items.bgMap +')' }"></div>
                </div>
            </div>
            <div class="swiper-pagination" slot="pagination"></div>
        </div>
    </div>
</template>
 
<script>
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import 'swiper/swiper.less';
 
    import SwiperCore, { Pagination, Autoplay} from 'swiper';
    SwiperCore.use([ Pagination, Autoplay]);
 
    export default {
        name: "swiperComponent",
        components: {
            Swiper,
            SwiperSlide,
        },
        data() {
            return {
                swiperList: [
                    {
                        id: 0,
                        bgMap: require("@assets/banner/banner_01.png"),
                        annotate: "背景图第一张"
                    }, {
                        id: 1,
                        bgMap: require("@assets/banner/banner_01.png"),
                        annotate: "背景图第二张"
                    }, {
                        id: 2,
                        bgMap: require("@assets/banner/banner_01.png"),
                        annotate: "背景图第三张"
                    }
                ]
            }
        },
        mounted() {
            this.$nextTick(() => {
                new SwiperCore(".swiper-container", {
                    loop: true,
                    autoplay: {
                        delay: 1000000,
                        disableOnInteraction: false
                    },
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true
                    }
                });
            });
        }
    }
</script>
 
<style scoped>
    .swiperComponent {
        position: relative;
    }
 
    .swiperComponent, .swiper-container, .swiper-slide, .swiper-BgMap {
        width: 100%;
        height: 100%;
    }
 
    .swiper-BgMap {
        max-width: 1920px;
        margin: 0 auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
 
    .swiper-pagination {
        position: absolute;
        z-index: 999999;
        left: 0;
        right: 0;
        bottom: 25px;
        margin: auto;
        height: 15px;
        width: 285px;
        display: flex;
        overflow: hidden;
    }
 
    .swiper-container >>> .swiper-pagination-bullet {
        width: 30px;
        height: 13px;
        cursor: pointer;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 15px;
        border: 1px solid #FFFFFF;
    }
 
    .swiper-container >>> .swiper-pagination-bullet:last-of-type {
        margin-right: 0 !important;
    }
 
    .swiper-container >>> .swiper-pagination-bullet-active {
        width: 90px;
        background-color: #FFFFFF;
    }
</style>

linying

多谢楼主分享

TANGGUOTAO

6666666666

你猜我是谁666

谢谢分享

qingwangba

感谢楼主的分享