I’m trying to build an app where the main page has a set of ion-card. Just one card is displayed on the screen and trough vertical scroll the user can reveal other card (as in instagram with posts).
Every card can have several images. Just one image at time is showed in full screen inside the card and thought horizontal swipe other images are showed. I built a specific component for the card called item-card. Basically there’re two nested swiper (vertical and horizontal).
tab files:
<ion-content>
<swiper class="vertical-swiper" [config]="itemVerticalSwiperConfig">
<ng-template swiperSlide class="company-slide" *ngFor="let image of images">
<app-item-card class="item-card"></app-item-card>
</ng-template>
</swiper>
</ion-content>
.vertical-swiper {
height: 100%;
}
.company-slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.item-card {
height: 93% !important;
}
public itemVerticalSwiperConfig: SwiperOptions = {
slidesPerView: 1,
direction: 'vertical',
spaceBetween: 25,
};
item-card component files:
<ion-card>
<swiper class="horizontal-swiper" [config]="imageSwiperConfig">
<ng-template class="hor-slide" swiperSlide *ngFor="let image of images">
<img class="full-screen-image" src="./assets/{{image}}" alt="">
</ng-template>
</swiper>
</ion-card>
.full-screen-image {
height: 100%;
object-fit: cover;
}
ion-card {
border-radius: 2%;
height: 100%;
margin: auto;
width: auto;
}
.horizontal-swiper {
height: 100%;
}
public imageSwiperConfig: SwiperOptions = {
slidesPerView: 'auto',
spaceBetween: 0,
};
At the moment the ion-card seems not fit properly on the image so there’s a margin between the image and the border of the card, as you can see from the following screenshots.
I need the card to be fitted on the image an centered horizontally and vertically in the screen.
Can someone help me in solving this problem ?
Thank you very much in adavance and sorry for my bad English.
I tried to explain at my best 