Z-index does not work with vue-awesome-swiper in Vue + Laravel projects

Question

I use vue-awesome-swiper https://madewithvuejs.com/vue-awesome-swiper in my Vue LAravel project.

This is the result I want to achieve. The sliding arrow is at the top and is clickable.

Instead, what I'm implementing is this. The sliding arrow is not at the top and is not clickable.

In order for vue-awesome-swiper to work, the code must follow a specific format.

This is the swipe code I'm using:

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

This is the script for the slider:

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

These are the styles:

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

As you can see, the swiper buttons have a higher z-index, but they are not on top of the .swiper-caption div. I tried changing the structure of the html code so that the sliding button and sliding title are in the same div like this:

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

But when I use the above code the result I get is this. The sliding button and sliding title disappeared, probably because in the vue-awesome-swiper structure, the sliding button cannot be inside another div. I do not know why.

Any suggestions on how to get the correct results?

Answer 1

Try using 999999 z-index value and/or relative position and/or absolute position on child elements.