Z-index ne fonctionne pas avec vue-awesome-swiper dans les projets Vue + Laravel

Question

J'utilise vue-awesome-swiper https://madewithvuejs.com/vue-awesome-swiper dans mon projet Vue + LAravel.

C'est le résultat que je souhaite atteindre. La flèche coulissante est en haut et est cliquable.

Au lieu de cela, ce que je mets en œuvre est ceci. La flèche coulissante n'est pas en haut et n'est pas cliquable.

Pour que vue-awesome-swiper fonctionne, le code doit suivre un format spécifique.

Voici le code Swipe que j'utilise :

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

Voici le script du 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>

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

Comme vous pouvez le voir, les boutons de balayage ont un z-index plus élevé, mais ils ne sont pas au-dessus du div .swiper-caption . J'ai essayé de changer la structure du code html pour que le bouton coulissant et le titre coulissant soient dans le même div comme ceci :

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

Mais lorsque j'utilise le code ci-dessus, le résultat que j'obtiens est le suivant. Le bouton coulissant et le titre coulissant ont disparu, probablement parce que dans la structure vue-awesome-swiper, le bouton coulissant ne peut pas être à l'intérieur d'un autre div. Je ne sais pas pourquoi.

Des suggestions sur la façon d'obtenir les bons résultats ?

Answer 1

Essayez d'utiliser la valeur d'index z 999999 et/ou la position relative et/ou la position absolue sur les éléments enfants.