nuxt3：swiper实现轮播效果

一、背景

nuxt3项目使用swiper实现轮播图效果。

二、官网文档

2.1、Swiper CDN

Swiper CDN - Swiper中文网

2.2、使用方法

Swiper使用方法 - Swiper中文网

2.3、基础演示

Swiper演示 - Swiper中文网

2.4、api

中文api - Swiper中文网

三、项目使用

3.1、nuxt.config.ts引入css、js

link: [
    { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/swiper@8/swiper-bundle.css'}
],
script: [
    {
        type: 'text/javascript',
        src: 'https://unpkg.com/swiper@8/swiper-bundle.js'
    }
]

3.2、页面使用

<template>
    <div class="container">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">snow</div>
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</template>

<script setup lang="ts">

onMounted(() => {
    let swiper = new Swiper(".mySwiper", {
        slidesPerView: 5, // 轮播区域展示的数量
        spaceBetween: 30,
        mousewheel: true,
        keyboard: true,
        loop: true, // 循环播放
        speed: 2500,
        autoplay: { // 自动播放
          delay: 2500,
          disableOnInteraction: false,
        },
        navigation: {
            prevEl: ".swiper-button-prev",
            nextEl: ".swiper-button-next",
        },
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true,
        // }
    });
})
</script>

<style scoped lang="scss">

.container{
    .swiper {
        width: 500px;
        height: 100px;
        border: 2px solid #ff0000;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        background: #ccc;
        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;
    }
    .swiper-button-prev{
        background: #eee;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .swiper-button-next{
        background: #eee;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    // 去掉左右箭头默认样式
    .swiper-button-prev:after{
        display: none;
    }
    .swiper-button-next:after{
        display: none;
    }
    // 定义新的样式
    .swiper-button-prev{
        width: 35px;
        height: 35px;
        background: url('~/assets/imgs/nginx.jpg') no-repeat;
        bottom: 15px;
    }
    .swiper-button-next{
        width: 35px;
        height: 35px;
        background:url('~/assets/imgs/nginx.jpg') no-repeat;
        bottom: 15px;
    }
}
</style>

3.3、效果展示

四、过程记录

记录一、

再引入swiper时，尝试了npm 包： swiper、vue-awesome-swiper等，尝试在nuxt3里增加plugin的方式引入，都没有成功，个人感觉应该是可以的，可能是我没有尝试对，最后使用了在nuxt.config.ts中引入的方法。

记录二、

在nuxt.config.ts中引入网络上的js、css，可能会加载慢导致页面加载速度也慢，我们可以把js、css放在public目录下，引入本地文件，这样可以加快文件请求速度。

五、欢迎交流指正，关注我，一起学习。