mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
37
ionic/components/slides/test/loop/index.ts
Normal file
37
ionic/components/slides/test/loop/index.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import {App, IonicApp} from 'ionic/ionic';
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class MyApp {
|
||||
constructor(app: IonicApp) {
|
||||
this.app = app;
|
||||
|
||||
this.slides = [
|
||||
{
|
||||
name: "Slide 1",
|
||||
class: "yellow"
|
||||
},
|
||||
{
|
||||
name: "Slide 2",
|
||||
class: "red"
|
||||
},
|
||||
{
|
||||
name: "Slide 3",
|
||||
class: "blue"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
onSlideChanged(slider) {
|
||||
console.log('Slide changed', slider);
|
||||
console.log("active index", slider.activeIndex);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
setTimeout(() => {
|
||||
this.slider = this.app.getComponent('loopSlider');
|
||||
console.log('Got slider', this.slider);
|
||||
});
|
||||
}
|
||||
}
|
19
ionic/components/slides/test/loop/main.html
Normal file
19
ionic/components/slides/test/loop/main.html
Normal file
@ -0,0 +1,19 @@
|
||||
<ion-slides loop="true" id="loopSlider" (slideChanged)="onSlideChanged($event)" pager>
|
||||
<ion-slide *ngFor="#slide of slides" [ngClass]="slide.class">
|
||||
{{ slide.name }}
|
||||
</ion-slide>
|
||||
</ion-slides>
|
||||
|
||||
<style>
|
||||
.yellow {
|
||||
background-color: #fbeb14;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #ED4337;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #89cff0;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user