在nuxt3中使用swiper幻灯片插件

在nuxt3中使用swiper幻灯片插件

虽然经常使用swiper但是在不同环境下，使用方式还是有很大不同，这里记录下在nuxt3中使用swiper的两种方式。

以组件的方式使用

在vue中都大多使用组件，这里使用官方的nuxt-swiper，注意swiper版本很多，这里直接npm下载的没考虑版本

• 下载

# npm
npm install nuxt-swiper
# yarn
yarn add nuxt-swiper
#pnpm
pnpm add nuxt-swiper

• 配置

// nuxt.config.ts
import {
    
     defineNuxtModule } from 'nuxt'
export default defineNuxtConfig({
    
    
  modules: ['nuxt-swiper']
  swiper: {
    
    
    // Swiper options
    //----------------------
    // prefix: 'Swiper',
    // styleLang: 'css',
    // modules: ['navigation', 'pagination'], // all modules are imported by default
  }
})

• 使用

swiper主要注意三个方面 属性 事件 方法

• 属性类似于v-bind的绑定
• 事件类似于v-on的绑定
• 方法需要获取当前swiper的实例在@swiper事件执行后获取swiper实例并保存即可

值的注意的是nuxt中模块都是自动导入的无需自己导入

实例代码如下

<template>
  <swiper 
  ref="mySwiperRef"
  :modules="[SwiperNavigation, SwiperPagination, SwiperScrollbar]"
  :slides-per-view="1" 
  :space-between="40" 
  navigation
  :breakpoints="breakpoints" 
  :pagination="{ clickable: true }"
  :scrollbar="{ draggable: true }" 
  loop
  @swiper="onSwiper" @slideChange="onSlideChange">
    <swiper-slide> <div class="item"> Slide 1 </div> </swiper-slide>
    <swiper-slide> <div class="item"> Slide 2 </div> </swiper-slide>
    <swiper-slide> <div class="item"> Slide 3 </div> </swiper-slide>
    <swiper-slide> <div class="item"> Slide 4 </div> </swiper-slide>
    <swiper-slide> <div class="item"> Slide 5 </div> </swiper-slide>
    <swiper-slide> <div class="item"> Slide 6 </div> </swiper-slide>
    <swiper-slide> <div class="item"> Slide 7 </div> </swiper-slide>
    <swiper-slide> <div class="item"> Slide 8 </div> </swiper-slide>
    <swiper-slide> <div class="item"> Slide 9 </div> </swiper-slide>
  </swiper>
  <div class="btns">
    <el-button type="primary" icon="ArrowLeftBold" circle @click="toPrev"/>
    <el-button type="primary" icon="ArrowRightBold" circle @click="toNext"/>
  </div>

</template>

<script setup>
  import {
      
       ref,onMounted,inject } from 'vue';
  import {
      
       Controller } from 'swiper';
  import {
      
       Swiper, SwiperSlide,useSwiper } from 'swiper/vue';

  let mySwiper = null;

  /** 断点 */
  let breakpoints = ref(null);
  breakpoints.value = {
      
       
    320: {
      
        //当屏幕宽度大于等于320
      slidesPerView: 2,
      spaceBetween: 10
    },
    768: {
      
        //当屏幕宽度大于等于768 
      slidesPerView: 3,
      spaceBetween: 20
    },
    1280: {
      
        //当屏幕宽度大于等于1280
      slidesPerView: 4,
      spaceBetween: 30
    }
  }

  /** 自定义按钮 */
  function toPrev(){
      
      
    mySwiper.slidePrev();
  }

  function toNext(){
      
      
    mySwiper.slideNext();
  }

  /** swiper加载完毕 */
  const onSwiper = (swiper) => {
      
      
    mySwiper = swiper;
  };
  /** swiper切换 */
  const onSlideChange = () => {
      
      
    console.log('slide change');
  };

</script>

<style scoped lang="scss">
  .item{
      
      
    height:300px;
    text-align:center;
    line-height:300px;
    background:#ccc
  }
  .active-item{
      
      
    color:tomato
  }
  .btns{
      
      
    margin-top:20px
  }
</style>

使用姿势

nuxt-swiper的文档很简洁这里给出我的使用方式，想要实现更多效果需要看其他文档

1. https://nuxt.com.cn/modules/swiper 【nuxt-swiper的文档和2有些许区别（主要是引入方式不同）- - 过一眼】
2. https://swiperjs.com/vue 【swiper-vue的文档其中描述了swiper组件的prop、插槽等，这里比较重要因为基本语法就是按照这里来的 - -了解大概就行】
3. https://swiper.com.cn/api/index.html 【swiper中文网，这里的文档是我觉得最好看懂且有实例更形象⭐，这里可以细看；缺点在于语法是原生JavaScript语法，所以需要将3和2对照着用】
4. https://swiper.com.cn/demo/index.html 【基础案例】
5. https://swiper.com.cn/demo/web/index.html 【好康的幻灯片案例】

swiper毕竟是旧时代的残党在vue中使用肯定没有element、vant那样自然，也许旧的方式比组件适合

以原生的方式使用

正如上文所说，以组件的方式使用swiper文档不给力，不好用。原生的文档更好更直观，下面介绍nuxt中使用原生swiper的方式 版本8.3.0。

• 下载
  https://swiper.com.cn/demo/145-css-mode.html 访问这个页面，按ctrl+u找到css文件链接和js文件链接，把这两个文件下载下来

• 引入
  在plugin/global.js中引入

// plugin/global.js

/* swiper */
import './swiper/swiper-bundle.min.css';
import './swiper/swiper-bundle.min';

export default defineNuxtPlugin(async (NuxtApp) => {
    
    
  
})

• 使用

<template>
    <div>
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <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>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>

<script setup>
    import {
      
      
        ref,
        onMounted
    } from "vue";

    onMounted(() => {
      
      
        // 个人还是这语法看着舒服
        var swiper = new Swiper(".mySwiper", {
      
      
            cssMode: true,
            navigation: {
      
      
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
      
      
                el: ".swiper-pagination",
            },
            mousewheel: true,
            keyboard: true,
        });
    })
</script>

<style lang="scss">
    .swiper {
      
      
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
      
      
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;

        height: 300px
    }
</style>