vue2 引用swiper

参考引用 ：

vue使用swiper实现轮播图一页多张图片效果_swiper多张图片排列的轮播_空空的博客-CSDN博客

 vue2 使用swiper_vue2使用swiper__NIXIAKF的博客-CSDN博客

 常见的属性：Swiper 中常见的属性以及方法_swiper-wrapper_超勇的.的博客-CSDN博客

 

 1、运行安装命令

npm i swiper@5.x vue-awesome-swiper -s

安装后如果无法使用左右切换建议更改版本

手动强制更改然后重启项目  

 "swiper": "^5.4.5",
 "vue-awesome-swiper": "^4.1.1",

 

2、main.js引入 

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

 import "../../../static/css/swiper.min.css";  引用  import 'swiper/dist/css/swiper.min.css'

根据自己的情况更改地址

3、页面

<template>
    <div>
        <div class="sectionbox">
            <section class="pc-banner">
                <div class="swiper-container">
                    <div
                        class="swiper-wrapper"
                        style="display: flex; align-items: center"
                    >
                        <div
                            class="swiper-slide swiper-slide-center none-effect"
                        >
                            <img
                                src="https://img1.baidu.com/it/u=1472391233,99561733&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
                                alt=""
                            />
                        </div>
                        <div class="swiper-slide">
                            <img
                                src="https://img1.baidu.com/it/u=3007048469,3759326707&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
                                alt=""
                            />
                        </div>
                        <div class="swiper-slide">
                            <img
                                src="https://img2.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
                                alt=""
                            />
                        </div>
                        <div class="swiper-slide">
                            <img
                                src="https://img1.baidu.com/it/u=4049022245,514596079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
                                alt=""
                            />
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="button">
                    <div
                        class="swiper-button-prev"
                        slot="button-prev"
                        @click="swiperPrev"
                    ></div>
                    <div
                        class="swiper-button-next"
                        slot="button-next"
                        @click="swiperNext"
                    ></div>
                </div>
            </section>
        </div>
        <!-- <div style="margin-top: 50px"></div>
        <div class="radius"></div> -->
    </div>
</template>
     
     <script>
//      https://blog.csdn.net/weixin_50114203/article/details/129488818
//      "swiper": "^5.4.5",
//      "vue-awesome-swiper": "^4.1.1",
import Swiper from "swiper";
//      import 'swiper/dist/css/swiper.min.css'
import "../../../static/css/swiper.min.css";
export default {
    data() {
        return {};
    },
    mounted() {
        this.$nextTick(() => {
            this.Lunbo();
        });
    },
    methods: {
        Lunbo() {
            var swiper = new Swiper(".swiper-container", {
                slidesPerView: 4,
                // breakpoints: {
                //     750: {
                //         slidesPerView: 1,
                //     },
                //     990: {
                //         slidesPerView: 2,
                //     },
                // },
                // spaceBetween: 0,
                spaceBetween: 0, //按container的百分比
                loop: true,
                speed: 1000,
                // autoplay: true,
                autoplay: {
                    delay: 2600,
                    stopOnLastSlide: true,
                    disableOnInteraction: true,
                },
                autoplayDisableOnInteraction: false,
                disableOnInteraction: true,
                observer: true,
                observeParents: true,
                pagination: ".swiper-pagination",
                // 设置分页器
                // pagination: {
                //   el: '.swiper-pagination',
                //   // 设置点击可切换
                //   clickable: true
                // },
                paginationClickable: true,
                mousewheelControl: true,
                debugger: true,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                on: {
                    touchStart: function (swiper, event) {
                        //       alert('事件触发了;');
                    },
                },
            });
        },

        swiperNext() {
            //     this.$refs.interSwiper.$swiper.slideNext()
        },
        swiperPrev() {
            //     this.$refs.interSwiper.$swiper.slidePrev()
            // console.log(this.$refs.interSwiper)
        },
    },
};
</script>
     

<style lang="scss" scoped>
// .radius{
//     width: 50px;
//     height: 150px;
//  //     background-image: radial-gradient(50px at top left,#fff 50px, #f00);
// }

.radius {
    width: 100%;
    height: 34%;
    position: relative;
}

.radius::before {
    position: absolute;
    content: "";
    display: block;
    top: 34px;
    left: 155px;
    width: 270px;
    height: 190px;
    border-radius: 2px 0 0 2px;
    background: radial-gradient(70px at right, transparent 97%, #007297 50%);
    background: radial-gradient(70px at right, transparent 97%, #007297 50%);
    z-index: 2;
}

/* 置灰按钮的样式 */
.my-button-disabled {
    opacity: 0.5;
}

.sectionbox {
    text-align: center;
    width: 80%;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
    .button {
        // width: 50px;
        // height: 50px;
        // // display: inline-block;
        // background: red;
    }
}
.swiper-container {
    img {
        // height: 200px;
        width: 300px;
    }
}
</style>