[英]Is there any possiblity to center currenlty selected slide in ion-slides?
[英]Could not place image to center in ion-slides
我正在嘗試在離子項目內設計一張幻燈片,一切正常,但幻燈片內的圖像未放置在 center 中。
<ion-item style="height:45%; padding-left: 0;">
<ion-slides centeredSlides="true" zoom="true" class="image-slider" loop="true" slidesPerView="1">
<ion-slide *ngFor="let img of images">
<img style="max-width:100%; text-align: center; max-height:100%;" src="{{img}}" class="thumb-img" imageViewer/>
</ion-slide>
</ion-slides>
</ion-item>
在我的 ts 文件中,我有一個 url 數組
images =[ 'https://pay.google.com/about/static/images/social/knowledge_graph_logo.png',
'https://connectnigeria.com/articles/wp-content/uploads/2018/05/google-apps.jpg',
'http://www.google.com/logos/doodles/2015/tu-bav-2015-5651988540817408-hp2x.jpg'
];
當我這樣做時,我的左側會出現一個空白區域,我想將圖像放置到中心並與滑動 ui 一起
ion-slides.image-slider { display: flex; justify-content: center; align-items: center; }
<ion-item style="height:45%; padding-left: 0;"> <ion-slides centeredSlides="true" zoom="true" class="image-slider" loop="true" slidesPerView="1"> <ion-slide *ngFor="let img of images"> <img style="max-width:100%; text-align: center; max-height:100%;" src=https://image.ibb.co/k303BL/111.jpg class="thumb-img" imageViewer/> </ion-slide> </ion-slides> </ion-item>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.