Question

我还是Ionic的新手，我想在我的网页上放幻灯片。我用过带有pager =“ true”的离子幻灯片。问题是分页符号与幻灯片内容重叠。我使用了inspect元素来发现子弹的位置。看来项目符号设置为position：absolute。我不知道如何替换CSS的位置，因为项目符号位于影子DOM中。谢谢。

<ion-slides pager = "true">
   <ion-slide>
     <h1>Slide 1</h1>
   </ion-slide>
   <ion-slide>
     <h1>Slide 2</h1>
   </ion-slide>
   <ion-slide>
     <h1>Slide 3</h1>
   </ion-slide>
</ion-slides>

Answer 1

在ionic中，我在global.scss中定义：

.swiper-pagination {
    position: relative;
    padding-top: 10px;
}

Answer 2

我曾经遇到这个问题。我所做的是使用CSS将分页指示器固定在屏幕底部

.swiper-pagination {
   position: fixed;
   bottom: 0px;
   padding-bottom: 3px;

}

Answer 3

veriables.scss

   .swiper-pagination {
      bottom: 0px !important;
    }

您需要！important来忽略以前的样式，或者使用id +类来覆盖样式，以实现良好的实践https://marksheet.io/css-priority.html

Answer 4

向您的<IonSlides>添加一个自定义的类名。例如（在Ionic React中）：<IonSlides className="my-custom-slider">

然后我要做的是在自定义css文件中添加padding-top和padding-bottom。

.my-custom-slider {
     padding-top: 10px;
     padding-bottom: 10px;
 }

此后，更改.swiper-navigation中<IonSlides>的位置

.my-custom-slider .swiper-pagination {
     bottom: 0px;
 }

现在它们不再重叠:)。我只是在Android上遇到了这个问题，所以我也将选择器.md添加到了自定义类中，使上面的示例如下所示：

.my-custom-slider.md { 
     padding-top: 10px;
     padding-bottom: 10px;
 }

离子-幻灯片分页符号与幻灯片内容重叠[离子4]

4 个答案: