[Angular] image slider 구현하기

ionic 차례

 

src/assets 폴더에 slide 이미지 3개를 추가합니다.

src/app/home/home.page.html

<app-header></app-header>

<ion-content>
  <ion-slides #sliders (ionSlidesDidLoad)='slidesDidLoad(sliders) 'pager='true' [options]='slideOpts'>
    <ion-slide>
      <img src="../../assets/slide1.png" alt="" srcset="">
    </ion-slide>
    <ion-slide>
      <img src="../../assets/slide2.png" alt="" srcset="">
    </ion-slide>
    <ion-slide>
      <img src="../../assets/slide3.png" alt="" srcset="">
    </ion-slide>
  </ion-slides>

  <ion-card class="welcome-card">
    <img src="/assets/shapes.svg" alt=""/>
    <ion-card-header>
      <ion-card-subtitle>Get Started</ion-card-subtitle>
      <ion-card-title>Welcome to Ionic</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>
        Now that your app has been created, you'll want to start building out features
        and components. Check out some of the resources below for next steps.
      </p>
    </ion-card-content>
  </ion-card>

  <ion-list lines="none">
    <ion-list-header>
      <ion-label>Resources</ion-label>
    </ion-list-header>
    <ion-item href="https://ionicframework.com/docs/">
      <ion-icon slot="start" color="medium" name="book"></ion-icon>
      <ion-label>Ionic Documentation</ion-label>
    </ion-item>
    <ion-item href="https://ionicframework.com/docs/building/scaffolding">
      <ion-icon slot="start" color="medium" name="build"></ion-icon>
      <ion-label>Scaffold Out Your App</ion-label>
    </ion-item>
    <ion-item href="https://ionicframework.com/docs/layout/structure">
      <ion-icon slot="start" color="medium" name="grid"></ion-icon>
      <ion-label>Change Your App Layout</ion-label>
    </ion-item>
    <ion-item href="https://ionicframework.com/docs/theming/basics">
      <ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
      <ion-label>Theme Your App</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

src/app/home/home.page.ts

import { Component } from '@angular/core';
import { IonSlides } from '@ionic/angular'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

  slideOpts = {
    loop: true
  }
  slidesDidLoad(slides:IonSlides) {
    slides.startAutoplay()
  }

}

 

 

 

ionic 차례