Z-index 不適用於 Vue + Laravel 專案中的 vue-awesome-swiper
我在 Vue LAravel 專案中使用 vue-awesome-swiper https://madewithvuejs.com/vue-awesome-swiper。
這就是我想要達到的結果。滑動箭頭位於頂部並且可點擊。
相反，我正在實現的是這個。滑動箭頭不在頂部且不可點擊。
為了讓 vue-awesome-swiper 運作，程式碼必須遵循特定的格式。
這是我正在使用的刷卡程式碼：
<div class="container-fluid p-0 cd-contentx">
<div class="row mx-0 position-relative">
<swiper class="swiper position-relative" :options="swiperOptionAuto">
<swiper-slide class="col-border" style="width: auto">
<img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
</swiper-slide>
<swiper-slide class="col-border" style="width: auto">
<img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
</swiper-slide>
<swiper-slide class="col-border" style="width: auto">
<img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
</swiper-slide>
<swiper-slide class="col-border" style="width: auto">
<img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
</swiper-slide>
<swiper-slide class="col-border" style="width: auto">
<img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
</swiper-slide>
<div class="swiper-btn-prev swiper-light" slot="button-prev"></div>
<div class="swiper-btn-next swiper-light" slot="button-next"></div>
</swiper>
<div class="col-12 text-center swiper-caption">
<h4 class="title-swiper-caption">Exquisite Inspirations Room by Room</h4>
<a>EXPLORE ALL ROOMS</a>
</div>
</div>
</div>
這是滑動器的腳本：
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import "swiper/css/swiper.css"
export default {
name: 'swiper-example-navigation',
title: 'Navigation',
components: {
Swiper,
SwiperSlide
},
data() {
return {
swiperOptionAuto: {
slidesPerView: 'auto',
loop: true,
centeredSlides: true,
navigation: {
nextEl: '.swiper-btn-next',
prevEl: '.swiper-btn-prev'
}
}
}
}
}
</script>
這些是樣式：
.swiper-btn-next, .swiper-btn-prev {
top: 93%;
position: absolute;
z-index: 1000;
cursor: pointer;
padding: 6px;
}
.swiper-caption {
z-index: 1;
background-color: #32151a;
opacity: 70%;
margin-bottom: 3px;
padding: 2rem;
position:absolute;
bottom:0;
right:0;
}
如您所見，滑動按鈕的 z-index 較高，但它們不在 .swiper-caption div 的頂部。我嘗試更改 html 程式碼的結構，使滑動按鈕和滑動標題位於同一個 div 中，如下所示：
<div class="container-fluid p-0 cd-contentx">
<div class="row mx-0 position-relative">
<swiper class="swiper position-relative" :options="swiperOptionAuto">
<swiper-slide class="col-border" style="width: auto">
<img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
</swiper-slide>
<swiper-slide class="col-border" style="width: auto">
<img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
</swiper-slide>
<swiper-slide class="col-border" style="width: auto">
<img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
</swiper-slide>
<swiper-slide class="col-border" style="width: auto">
<img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
</swiper-slide>
<swiper-slide class="col-border" style="width: auto">
<img src="/images/homepage/ambientes/ambience-1.jpg" alt="" class="img-fluid-ambientes">
</swiper-slide>
<div class="col-12 text-center swiper-caption">
<h4 class="title-swiper-caption">Exquisite Inspirations Room by Room</h4>
<a>EXPLORE ALL ROOMS</a>
<div class="swiper-btn-prev swiper-light" slot="button-prev"></div>
<div class="swiper-btn-next swiper-light" slot="button-next"></div>
</div>
</swiper>
</div>
</div>
但是當我使用上面的程式碼時得到的結果是這樣的。滑動按鈕和滑動標題消失了，可能是因為在 vue-awesome-swiper 結構中，滑動按鈕不能位於另一個 div 內。我不知道為什麼。
關於如何獲得正確結果有什麼建議嗎？
