這似乎有效（在 Nuxt v2.14 中），但我不認為這是推薦的方式
家長
<Swiper
:options="carouselOptions"
/>
孩子
<template>
<div v-if="options" ref="swiper" class="carousel-hero carousel-hero--is-hidden swiper-container">
<div class="carousel-hero-wrapper swiper-wrapper">
<div
v-for="n in 5"
:key="n"
class="carousel-hero__slide slide swiper-slide"
>
<img
src="https://via.placeholder.com/1680x720"
class="slide__image"
style="max-height: 100px;"
/>
<div class="slide__content">
<h4 class="slide__heading">Heading {{ n }}</h4>
<p class="slide__description">Description {{ n }}</p>
<a
href="#"
class="slide__button"
>
Learn more {{ n }}
</a>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
</template>
<script>
import Swiper, { Navigation, Pagination } from 'swiper';
Swiper.use([Navigation, Pagination]);
import 'swiper/swiper-bundle.css';
export default {
name: 'Swiper',
props: {
options: {
type: Object,
default: () => {
return {
slidesPerView: 1
}
}
}
},
data() {
return {
swiper: null,
}
},
created() {
console.log('Swiper', Swiper);
},
mounted() {
let vm = this;
if (this.options && vm.$refs.swiper !== 'undefined') {
// or if (this.$el && this.options) {
vm.$refs.swiper.classList.remove('carousel-hero--is-hidden');
this.swiper = new Swiper(vm.$refs.swiper, {
// or this.swiper = new Swiper(this.$el, {
slidesPerView: this.options.slidesPerView,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
console.log('swiper initialized');
},
resize: function () {
console.log('resize');
}
}
});
}
},
methods: {
}
};
</script>
<style scoped>
.carousel-hero {
&--is-hidden {
display: none;
}
&-container {
@include make-container();
@include default-max-widths();
max-height: 200px !important;
overflow: hidden;
}
&-row {
@include make-row();
padding: rem(25px 0);
justify-content: center;
}
&-column {
@include make-col-ready();
}
border: 10px solid red;
&-wrapper {
}
&__slide {
}
.slide {
&__image {
@include img-fluid();
}
&__content {
border: 1px solid blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
@include media-breakpoint-up(lg) {
max-width: 85%;
max-height: 85%;
}
}
&__heading {
font-size: rem(48px);
}
&__description {
}
&__button {
}
}
}
</style>
