Ionic2 顯示多張幻燈片。 或者它的一部分

Question

我正在使用 ionic2，我想在我的項目中為卡片使用滑塊。 所有卡片都有圖像。 雖然 ion-slides 非常好，但我不能讓它像我想要的那樣工作。 我希望我可以一次在屏幕上放置多張幻燈片，或者至少可以在其他部分中放置多張幻燈片。 像這樣：

所以下一張和最后一張牌的一部分會很明顯。 有誰知道這是怎么做到的嗎？

現在我有這個：

 import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-page1', templateUrl: 'page1.html' }) export class Page1 { public extraOptions; constructor(public navCtrl: NavController) { this.extraOptions = { slidesPerView: 3 } } }

 page-page1 { overflow:hidden; } ion-content { overflow: hidden; } ion-slides { //height: 70%; //width: 30%; } ion-slide { //width: 50px; } ion-card { background-color: #652345; } img{ //margin: 5%; //max-width: 90%; } .card1 { background-color: mediumseagreen; } .card2 { background-color: cornflowerblue; } .questionblock { background-color: transparent; }

 <ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Page One</ion-title> </ion-navbar> </ion-header> <ion-content> <ion-slides effect="sides" initialSlide=1 pager = true slidesPerView=2> <ion-slide> <ion-card class="card1"> <img src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg" /> <ion-card-content> <ion-card-title> Nine Inch Nails Live </ion-card-title> <p>Cuidador de Mascotas</p> </ion-card-content> </ion-card> </ion-slide> <ion-slide class="questionblock"> <ion-card class="questionblock"> <img src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg" /> <ion-card-content> <ion-card-title> Quesstion </ion-card-title> <p>where is the love...</p> </ion-card-content> </ion-card> </ion-slide> <ion-slide> <ion-card class="card2"> <img class="img" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg" /> <ion-card-content> <ion-card-title> Nine Inch Nails Live </ion-card-title> <p>Ninera con experienc...</p> </ion-card-content> </ion-card> </ion-slide> </ion-slides> <button ion-button>Button</button> </ion-content>

Answer 1

Css 的變化

ion-slides {
        width: 200% !important;
        margin-left: -50% !important;
    }

HTML 的變化

<ion-slides slidesPerView= 3 spaceBetween= 16 loop=true>

Answer 2

更新離子 2.0.0

slidesPerView 現在被添加到 ion-slides 的輸入中。 所以我們可以直接將它包含在 html 本身中，如下所示

<ion-slides pager loop slidesPerView="3">
   <ion-slide>
    ...
    </ion-slide>
</ion-slides>

離子 RC.5

由於 RC5 中的一些更改，離子載玻片無法正常工作。 您可以嘗試使用變量設置幻燈片選項。 用以下代碼替換 html 中的 ion-slides

 <ion-slides #slider> 
   ...
 </ion-slides>

使用變量在 ts 文件中設置幻燈片屬性

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class page1Page {

  @ViewChild(Slides) slider: Slides;
  constructor(public navCtrl: NavController) {

  }
  ngAfterViewInit(){
    this.slider.slidesPerView = 3;
    this.slider.pager = true;
  }
}

有關更多詳細信息，請參閱https://github.com/driftyco/ionic/issues/9988#issuecomment-272473892 。

Answer 3

在 ionic 5 中這真的很容易，為了在每個視圖中顯示 N 張幻燈片，您可以將以下內容放在您的 css 中（用每個視圖的幻燈片數量替換 N）：

.swiper-slide {
  width: calc(100% / N) !important;
}