Z-index not working on vue-awesome-swiper in Vue + Laravel project

Question

I am using vue-awesome-swiper https://madewithvuejs.com/vue-awesome-swiper in a Vue + LAravel project.

This is the result I am trying to achieve. The swiper arrows are on top and are clickable.

Instead, what I am achieving is this. The swiper arrows are not on the top and are not clickable.

For the vue-awesome-swiper to work the code has to follow an specific format.

This is the swiper code I am 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 of the 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>

And 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 z-index of the swiper buttons is higher, but they are not on top of the .swiper-caption div. I tried changing the structure of the html code to make the swiper buttons and swiper caption to be in the same div, like so:

<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 the result I get when I use the code above is this. The swiper buttons and the swiper caption disappear, probably because in the vue-awesome-swiper structure, the swiper buttons can't be be inside another div. I am not sure why.

Any suggestions on how to achieve the correct result?

give a high z index to .swiper-caption if the parent is hidden, so are the child doms inside it (position absolute referenced on .swiper-caption since it has a defined position too) — N69S, Aug 25 '21 at 11:27
Thank you for your comment but I did not quite understand your suggestion. I'm sorry :( You mean that I should put a higher z-index on swiper caption even though I want it to be behind the arrows? — mlila_p, Aug 27 '21 at 13:52

score 0 · Answer 1 · answered Aug 25 '21 at 11:15

0

Try with 999999 z-index value and / or relative position and / or absolute position on childs elements.

answered Aug 25 '21 at 11:15

Florian

36
6

Thanks for your suggestions. Childs are both in absolute position, as you can see in the css classes I posted above. I did change the value of z-index as suggested, but it did not work. – mlila_p Aug 25 '21 at 11:18
Maby this can help you : https://stackoverflow.com/a/9191845/12359854 – Florian Aug 25 '21 at 12:04
thank you! I actually did find this post before even posting. All of the elements already have position absolute. I have read that opacity can also play a role regarding z-index, but it still doesn´t work. Welp, gotta keep trying. Thanks anyway :) – mlila_p Aug 27 '21 at 13:49
You're welcome, but apparently { position: relative is needed – Florian Sep 01 '21 at 11:01
The parent divs are set with position relative atribute.Still can't solve the issue :( – mlila_p Sep 06 '21 at 13:16

Z-index not working on vue-awesome-swiper in Vue + Laravel project

1 Answers1