On boarding page with Swiper

SekouSallah · January 28, 2024, 10:01pm

Hello everyone. I have a problem with my slides (I use swiper) for onboarding. My images do fill the height correctly but the width is not good because it doesn’t fully display the image. I tried to center the images but I couldn’t. As in apps generally, I want the images to fill the screen and adapt depending on the device. Need help it’s very urgent. I’ll leave the code to you. Thanks in advance.

<ion-content [fullscreen]=“true”>

<swiper-container
[modules]=“swiperModules”
[pagination]=“{clickable: true, dynamicBullets: true}”
[keyboard]=“{ enabled: true }”
[autoplay]=“{ delay: 2500, disableOnInteraction: false }”
loop
>

<swiper-slide>
  <div [ngStyle]="{'background-image' : 'url(assets/med2.png)'}" class="ion-text-right">
    <ion-button fill="clear" color="blueviolet" (click)="goToLogin()">SKIP</ion-button>
  </div>
</swiper-slide>

<swiper-slide>
  <div [ngStyle]="{'background-image' : 'url(assets/doc.png)'}" class="ion-text-right">
    <ion-button fill="clear" color="blueviolet" (click)="goToLogin()">SKIP</ion-button>
  </div>
</swiper-slide>

<swiper-slide>
  <div [ngStyle]="{'background-image' : 'url(assets/med.jpg

)'}" class=“ion-text-center”>
<ion-button shape=“round” color=“light” (click)=“goToLogin()” class=“transformButton”>

Commencer

swiper-container { height: 100%; width : 100%; swiper-slide { width : 100% justify-content : center; display : flex; align-items : center; div { height: 100%; width : 100%; background-position : center background-size: cover background-repeat: no-repeat;

  .transformButton {
    margin-bottom: 10%; 
  }
}

}
}

ion-button {
position: absolute;
bottom: 5%;
font-family: ‘Courier New’, Courier, monospace;
left: 50%;
transform: translateX(-50%);
}

}