Use swiper slideshow plugin in nuxt3

Use the swiper slideshow plugin in nuxt3

Although swiper is often used, the usage methods are quite different in different environments. Here are two ways to use swiper in nuxt3.

Use as a component

Components are mostly used in vue. The official nuxt-swiper is used here. Note that there are many versions of swiper. The direct npm download here does not consider the version

• download

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

• configuration

// 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
  }
})

• use

Swiper mainly pays attention to three aspects attribute event method

• Attributes are bound like v-bind
• Events are similar to v-on bindings
• The method needs to get the current swiper instance Get the swiper instance and save it after the @swiper event is executed

It is worth noting that the modules in nuxt are automatically imported without the need to import them yourself

The example code is as follows

<template>
  <swiper
  ref="mySwiperRef"
  :modules="[SwiperNavigation, SwiperPagination, SwiperScrollbar]"
  :slides-per-view="1"
  :space-between="40"
  navigation
  :breakpoints="breakpoints"
  :pagination="{ clickable: true }"
  :scrollbar="{ draggable: true }"
  the 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;

  /** breakpoint */
  let breakpoints = ref(null);
  breakpoints. value = {<!-- -->
    320: {<!-- --> //When the screen width is greater than or equal to 320
      slidesPerView: 2,
      spaceBetween: 10
    },
    768: {<!-- --> //When the screen width is greater than or equal to 768
      slidesPerView: 3,
      spaceBetween: 20
    },
    1280: {<!-- --> //When the screen width is greater than or equal to 1280
      slidesPerView: 4,
      spaceBetween: 30
    }
  }

  /** Custom button */
  function toPrev(){<!-- -->
    mySwiper. slidePrev();
  }

  function toNext(){<!-- -->
    mySwiper. slideNext();
  }

  /** swiper loaded */
  const onSwiper = (swiper) => {<!-- -->
    mySwiper = swiper;
  };
  /** swiper switching */
  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>

Using gestures

The documentation of nuxt-swiper is very concise Here is my usage method, if you want to achieve more effects, you need to see other documents

1. https://nuxt.com.cn/modules/swiper [The documentation of nuxt-swiper is slightly different from that of 2 (mainly because of the different introduction methods) – – Take a look at it]
2. https://swiperjs.com/vue [The document of swiper-vue describes the props, slots, etc. of the swiper component. Here is more important because the basic syntax is here- 】
3. https://swiper.com.cn/api/index.html [swiper Chinese website, the documents here are the ones I think are the best to understand and have examples that are more vivid? You can take a closer look here; the disadvantage is that the syntax is native JavaScript syntax, So you need to compare 3 and 2]
4. https://swiper.com.cn/demo/index.html 【Basic case】
5. https://swiper.com.cn/demo/web/index.html [Swiper’s slideshow case]

After all, swiper is a remnant of the old era. It is definitely not as natural as element and vant in vue. Maybe the old way is more suitable than components

Use natively

As mentioned above, using swiper documents in a component way is not powerful and not easy to use. The native documentation is better and more intuitive. The following describes how to use native swiper in nuxt version 8.3.0.

• download
  https://swiper.com.cn/demo/145-css-mode.html Visit this page, press ctrl + u to find the css file link and js file link, and download these two files

• introduce
  Introduced in plugin/global.js

// plugin/global.js

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

export default defineNuxtPlugin(async (NuxtApp) => {<!-- -->
  
})

• use

<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(() => {<!-- -->
        // Personally, this syntax looks comfortable
        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>