离子滑块内部未显示离子按钮

Question

我想在所有幻灯片的底部添加按钮。第一张和最后一张幻灯片的按钮不同。

<ion-content>
<ion-slides (ionSlideWillChange)="onSlideChangeStart($event)" #slides>
    <ion-slide class="bg-image">

        <img class="imag" src="assets/imgs/enanswer01001.png"/>
        <button ion-button (click) = "home($event)" color = "pink" class="but" style="left: 0px;"><img src="assets/imgs/enarrow_left.png" align="center"/></button>
        <button ion-button (click) = "next($event)" color = "pink" class="but" style="right: 0px;"><img src="assets/imgs/enarrow_right.png" align="center"/></button>


    </ion-slide>

    <ion-slide class="bg-image">

    <img class="imag" src="assets/imgs/enanswer01002.png" />
    <button ion-button (click) = "prev($event)" color = "pink" class="but" style="left: 0px;"><img src="assets/imgs/enarrow_left.png" align="center"/></button>
    <button ion-button (click) = "next($event)" color = "pink" class="but" style="right: 0px;"><img src="assets/imgs/enarrow_right.png" align="center"/></button>


    </ion-slide>


       .
       . <!-- I have multiple slides like these -->
       .
       .
    <ion-slide class="bg-image">        

    <img class="imag" src="assets/imgs/enanswer01010.png"/>
        <button ion-button (click) = "prev($event)" color = "pink" class="but" style="left: 0px;"><img src="assets/imgs/enarrow_left.png" align="center"/></button>
        <button ion-button (click) = "menu($event)" color = "pink" class="but" style="right: 0px;"><img src="assets/imgs/enarrow_right.png" align="center"/></button>

    </ion-slide>

</ion-slides>
</ion-content>

上面的html代码仅显示第一张幻灯片的按钮。其余所有幻灯片甚至都不显示按钮。即使删除第一张幻灯片的按钮代码，第二张幻灯片的按钮也会出现在第一张幻灯片中。

以下是CSS代码

.swiper-slide{
    overflow-y: scroll;
    display: block;
}

ion-slide{
    height: auto;
    overflow-y: scroll;
}

.imag{
    padding-bottom: 50px;
    padding-top: 0px;
}

.bg-image{
    background-image: url('../assets/imgs/bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.but{
    position: fixed;
    bottom: 0%;
    display: inline-block;
    border-radius: 8px;
}

home（），next（）和prev（）函数分别导航到上一页，下一张幻灯片和上一张幻灯片。