![](/img/trans.png)
[英]Slick slider should only show 4 slides. However part of a 5th slider is showing when it should not
[英]Ionic2 show multiple slides. Or part of it
我正在使用 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>
Css 的变化
ion-slides {
width: 200% !important;
margin-left: -50% !important;
}
HTML 的变化
<ion-slides slidesPerView= 3 spaceBetween= 16 loop=true>
更新离子 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 。
在 ionic 5 中这真的很容易,为了在每个视图中显示 N 张幻灯片,您可以将以下内容放在您的 css 中(用每个视图的幻灯片数量替换 N):
.swiper-slide {
width: calc(100% / N) !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.