css - 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>

这是 swiper 的脚本：

<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;
}

如您所见，swiper 按钮的 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>

但是当我使用上面的代码时得到的结果是这样的。swiper 按钮和 swiper 标题消失了，可能是因为在 vue-awesome-swiper 结构中，swiper 按钮不能在另一个 div 内。我不确定为什么。

关于如何获得正确结果的任何建议？

标签： csslaravelvue.jsswiperswiper.js

css - Z-index 不适用于 Vue + Laravel 项目中的 vue-awesome-swiper

问题描述

解决方案

推荐阅读