代码之家  ›  专栏  ›  技术社区  ›  Moblize IT

Ionic 4滑块分页点与文本重叠

  •  0
  • Moblize IT  · 技术社区  · 7 年前

    我有离子幻灯片组件显示一些幻灯片。每个幻灯片的内容根据服务动态呈现。

     <div style="padding:15px; padding-top:30px;background-color: #232536">
      <ion-slides pager="true">
        <ion-slide *ngFor="let gal of core.gallery">
          <div>
            <img *ngIf="gal.type=='image'" src="{{gal.link}}">
            <iframe *ngIf="gal.type == 'video'" style="width: 100%" [src]="getVideoUrl(gal.link)" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <ion-row>
              <ion-col text-left><h2 style="color:white" >My Title</h2>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col style="color:#A2A0B2" text-left>{{gal.desc}}</ion-col>
            </ion-row>
          </div>
        </ion-slide>
      </ion-slides>
    

    0 回复  |  直到 7 年前
        1
  •  2
  •   Anusha Busetty    6 年前

    在幻灯片内容的末尾添加一个标记并从底部定位点,在global.CSS文件中添加以下CSS

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