0

I am trying to use swiper with my ionic/angular project to swipe between content. One template has a total height of around 1400px and the other template is around 450. I'd like to have both templates set to the height of 450px but the first one to be able to scroll. Right now by default it looks like it sets both of their height to the larger one so there is a lot of white space below the second one. I've tried to put 'height: 450px' on the outer DIV and ng-template tags to no avail. Any way to do this? Here is the code I am using

<ion-content>
    <swiper class="slide-image">
      <ng-template swiperSlide>
        <div>
          <app-loadsummary [loadDetails]="this.loadInfoService.loadDetail" *ngIf="this.loadInfoService.loadDetail">
          </app-loadsummary>
        </div>
      </ng-template>
      <ng-template swiperSlide>
        <div>
          <app-loadgrid *ngIf="loadInfoService.loadDetail?.TrailerPositions"
            [bulkheadEdit]="loadInfoService.bulkheadEdit">
          </app-loadgrid>
        </div>
        <ion-fab *ngIf="!loadInfoService.bulkheadEdit" horizontal="end" vertical="top" slot="fixed">
          <ion-fab-button (click)="handleButtonClick()" color="secondary">
            <ion-icon style="font-size: 30px" name="add-outline"></ion-icon>
          </ion-fab-button>
        </ion-fab>
      </ng-template>
    </swiper>
  </ion-content>
Joe Starnes
  • 471
  • 1
  • 6
  • 20
  • Wrap content inside your slide with div height: 450px; overflow: auto; and content will scroll. Or you can use swiper config with autoHeight: true; this way slides will change their height dynamically. – Taras Aug 26 '22 at 07:13
  • 1
    I was able to add: config: SwiperOptions = { autoHeight: true }; but now I don't see anything. – Joe Starnes Aug 26 '22 at 13:26
  • This is demo, should work https://codesandbox.io/s/clb5px?file=/src/app/app.component.ts – Taras Aug 26 '22 at 13:28

0 Answers0