Use 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
属性事件方法
- Attributes are bound like v-bind
- Events are similar to v-on bindings
- The method needs to get the current swiper instance
在@swiper事件执行后获取swiper实例并保存即可
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 }"
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>
Use posture
The documentation of nuxt-swiper is
简洁here to give me how to use it. If you want to achieve more effects, you need to see other documents
- 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]
- https://swiperjs.com/vue [The document of swiper-vue describes the props, slots, etc. of the swiper component, here
比较重要because the basic syntax is based on here--you can probably understand it] - https://swiper.com.cn/api/index.html [swiper Chinese website, I think the documents here are the best to understand and have more vivid examples⭐, 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]
- https://swiper.com.cn/demo/index.html 【Basic case】
- https://swiper.com.cn/demo/web/index.html [Swiper's slideshow case]
After all, swiper is 旧时代的残党used in vue, it is definitely not as natural as element and vant, 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 the native swiper version 8.3.0 in nuxt.
-
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 -
Import
Import 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(() => {
// 个人还是这语法看着舒服
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>