我在 Vue + LAravel 项目中使用 vue-awesome-swiper https://madewithvuejs.com/vue-awesome-swiper。

这就是我想要达到的结果。滑动箭头位于顶部并且可点击。

相反，我正在实现的是这个。滑动箭头不在顶部且不可点击。

为了让 vue-awesome-swiper 工作，代码必须遵循特定的格式。

这是我正在使用的刷卡代码：

        

            
                
                        
                
                
                        
                
                
                        
                
                
                        
                
                
                        
                                
                

                

            
            

                
Exquisite Inspirations Room by Room
                EXPLORE ALL ROOMS
            
        
    

这是滑动器的脚本：

这些是样式：

.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 中，如下所示：

        

            
                
                        
                
                
                        
                
                
                        
                
                
                        
                
                
                        
                
                

                        
Exquisite Inspirations Room by Room
                        EXPLORE ALL ROOMS
                        

                        

                
             
                         
        
    

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

关于如何获得正确结果有什么建议吗？