swiper的使用

1先来两个中文网
https://3.swiper.com.cn/api/pagination/2014/1217/71.htm
https://2.swiper.com.cn/api/pagination/2014/1217/68.htmll
2. yarn vue-awesome-swiper下载之后 我这里是全局引入的

3.在组件中引入

<template>
    <div ref="contents" class="container go-in">
        <swiper class="swiper" ref="mySwiper" :options="swiperOptions">
            <!-- 首页第一张 -->
            <swiper-slide class="swiper-bj">
                <div class="home-page-box">
                    <img :src="pageData.homeImg1" />
                    <div class="home-page-title">
                        <img :src="pageData.homeTitle" />
                    </div>
                </div>
            </swiper-slide>
            <swiper-slide class="swiper-bj">
                <div class="home-page-box">
                    <img :src="pageData.homeImg2" />
                    <div class="home-page-title">
                        <img :src="pageData.homeTitle" />
                    </div>
                </div>
                
            </swiper-slide>
          
        </swiper>
    
        <div class="swiper-pagination">
            <li></li>
            <li></li>
        </div>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
    name: 'KvContent',
    components: {
        swiper,
        swiperSlide,
    },

        tabIndex: Number,
    },
    data() {
        return {
            pageData: {
                homeImg1: './newImg/02-homepage/2_1.png',
                homeImg2: './newImg/02-homepage/2_2.png',
                homeTitle: './newImg/02-homepage/2_1_1.png',
            },
  
            swiperOptions: {
                // 横向滑动
                mode: 'horizontal',
                resistanceRatio: 0,
                // 避免卡顿
                observer: true,
                observeParents: true,
                observeSlideChildren: true,
                loop: false,
                autoplay: false,
                slidesPerView: 'auto',
                pagination: {
                    el: '.swiper-pagination', //与slot="pagination"处 class 一致
                    paginationType: 'custom',
                    clickable: true, //轮播按钮支持点击
                    // spaceBetween: 10,
                    paginationClickable: true,
                    autoplayDisableOnInteraction: false, //手动轮播后轮播不会自动滑动
                    // slidesPerView:'auto',
                    // freeMode:true,
                    renderCustom: function (swiper, current, total) {
                        var paginationHtml = ' ';
                        for (var i = 0; i < total; i++) {
                            // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
                            if (i === current - 1) {
                                paginationHtml +=
                                    '<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>';
                            } else {
                                paginationHtml +=
                                    '<span class="swiper-pagination-bullet"></span>';
                            }
                        }
                        return paginationHtml;
                    },
                },
                publicPath: process.env.BASE_URL,
            },
        };
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.$swiper;
        },
    },
    created() {},
    mounted() {
        if (this.timer == null) {
            this.timer = setInterval(() => {
                this.current += 1;
                if (this.current > 99) {
                    this.current = 99;
                    clearInterval(this.timer);
                }
            }, 1000 / 20);
        }
        this.$emit('initPage', this.goFirst);
    },
    methods: {
        goFirst() {
            this.$refs.mySwiper.swiper.slideTo(0, 0);
        },
    },
};
</script>

<style lang="scss" scoped>
.swiper-slide {
    /* flex-shrink: 0; */
    width: 100% !important;
    /* height: 100%; */
    position: relative !important;
    transition-property: transform !important;
}
#contents {
    position: relative;
}
.swiper-pagination {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 84%;
    left: 50%;
    z-index: 4;
}

.pro-btn-box {
    position: relative;
    width: 6.9rem;
    height: 0.9rem;
    top: 42%;
    left: 54%;
    margin-bottom: 20px;
    transform: translate(-50%, -50%);
}
.pro-btn {
    position: absolute;
    width: 5.8rem;
    height: 0.9rem;
    left: 50%;
    top: 50%;
    // left: 50%;
    // top: 86vw;
    transform: translate(-50%, -50%);
}
.detail-btn {
    position: absolute;
    width: 1.73rem;
    height: 0.56rem;
    left: 50%;
    top: 78%;
    // left: 50%;
    // top: 86vw;
    z-index: 4;
    transform: translate(-50%, -50%);
}
.pro-btn-word-1 {
    position: absolute;
    width: 3.4rem;
    height: 0.28rem;
    left: 42%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.pro-btn-word-2 {
    position: absolute;
    width: 2.9rem;
    height: 0.28rem;
    left: 42%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.pro-btn-word-3 {
    position: absolute;
    width: 3.24rem;
    height: 0.28rem;
    left: 42%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.pro-btn-word-4 {
    position: absolute;
    width: 3.09rem;
    height: 0.28rem;
    left: 42%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.pro-btn-word-5 {
    position: absolute;
    width: 2.59rem;
    height: 0.28rem;
    left: 42%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.pro-btn-arrow {
    position: absolute;
    width: 0.41rem;
    height: 0.41rem;
    left: 74%;
    top: 50%;
    // right: 28%;
    // top: 86vw;
    transform: translate(-50%, -50%);
}

.pro-light {
    position: absolute;
    width: 5.52rem;
    height: 3.35rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.item-container-box {
    width: 5.52rem;
    height: 3.35rem;
    position: relative;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
}

// @media screen and (max-device-height:700px), (min-aspect-ratio: 414/736) and (max-aspect-ratio: 414/606) {
//  .up-bg{
//     width: 60%;
//     height: 60%;
// }
// }

.up-bg {
    width: 7.5rem;
    height: 4.2rem;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-image: url('../../public/newImg/02-homepage/2_3_bg.png');
    background-size: 100% auto;
}

.swiper {
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    overflow: hidden;
}
.swiper-bj {
    width: 100vw;
    height: 100vh;
    transform: translate3d(0, 0, 0);
    overflow: hidden;
}
.home-page-box {
    width: 100vw;
    height: 16.24rem;
    position: relative;
}
.home-page-box img {
    width: 7.5rem;
    height: 9.8rem;
    position: absolute;
    top: 0;
    left: 0;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%, -50%);
}
.home-page-title {
    width: 7.5rem;
    height: 6.54rem;
    position: absolute;
    bottom: 0;
    left: 0;
}
.home-page-title img {
    width: 3.58rem;
    height: 1.94rem;
    position: absolute;
    left: 50%;
    top: 16%;
    transform: translate(-50%, -50%);
}
.go-in {
    opacity: 1;
    // animation: mymove 1s ease-out;
    // animation-fill-mode: forwards;
}

@keyframes mymove {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.pro-img-1 {
    width: 2.36rem;
    height: 3.4rem;
    position: absolute;
    left: 41%;
    top: 60%;
    transform: translate(-50%, -50%);
}
.pro-img-2 {
    width: 3.63rem;
    height: 3.23rem;
    position: absolute;
    left: 41%;
    top: 60%;
    transform: translate(-50%, -50%);
}
.pro-img-3 {
    width: 3.21rem;
    height: 3.33rem;
    position: absolute;
    left: 41%;
    top: 60%;
    transform: translate(-50%, -50%);
}

.pro-img-4 {
    width: 2.36rem;
    height: 3.63rem;
    position: absolute;
    left: 41%;
    top: 60%;
    transform: translate(-50%, -50%);
}
.pro-img-5 {
    width: 3.52rem;
    height: 3.57rem;
    position: absolute;
    left: 41%;
    top: 60%;
    transform: translate(-50%, -50%);
}
.pro-bg {
    width: 7.5rem;
    height: 0;
    flex: 1;
    overflow: hidden;
    vertical-align: top;
    position: relative;
    display: flex;
    flex-direction: column;
    // position: absolute;
    // left: 0;
    // top: 0;
    // transform: translateX(-50%) translateY(-50%);
}

.item-container {
    width: 6.9rem;
    height: 4.5rem;
    margin-bottom: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: translate3d(0, 0, 0);
}
</style>
<style>
/*自定义分页器的样式，这个你自己想要什么样子自己写*/
.swiper-pagination-bullet {
    width: 0.16rem !important;
    height: 0.08rem !important;
    background: #000000 !important;
    border-radius: 4px !important;
    margin: 0 5px;
    outline: 0;
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-bullet-active {
    width: 0.36rem !important;
    height: 0.08rem !important;
    display: inline-block;
    background: #f6ddb9 !important;
    border-radius: 4px !important;
    outline: 0;
}
.swiper-active-switch {
    background: #fff !important;
}
</style>