Morioh
Login
Duck Hwan

Duck Hwan

1 year ago

Angular에서 Swiper로 터치 지원 이미지 슬라이더를 만드는 방법

이 튜토리얼에서는 ngx-useful-swiper npm 패키지를 사용하여 각도 14 앱에서 터치 이미지/콘텐츠 슬라이더 또는 캐러셀을 만드는 방법을 배웁니다.

다음 단계를 사용하여 Angular 14 앱에서 swiper 이미지 터치 슬라이더를 만듭니다.

  • 1단계: 새 Angular 앱 만들기
  • 2단계: Swiper 패키지 설치
  • 3단계: App.Module.ts 파일에 코드 추가
  • 4단계: 보기 파일에 코드 추가
  • 5단계: app.Component ts 파일에 코드 추가
  • 6단계: Angular 앱 시작

1단계: 새 Angular 앱 만들기

먼저 터미널을 열고 다음 명령을 실행하여 각도 앱을 설치합니다.

ng new my-new-app

2단계: Swiper 패키지 설치

그런 다음 Swiper Package라는 NPM 패키지를 설치하여 Angular 앱에서 Swiper를 구현합니다. 따라서 터미널에서 다음 명령을 실행하여 패키지를 설치할 수 있습니다.

npm install --save ngx-useful-swiper@latest swiper

그런 다음 angular.json  파일 의 앱 스타일에 대한 swiper CSS 경로를 포함하여 swiper 기본 CSS 스타일을 활성화할 수 있습니다  .

...
...
...
"styles": [
     "./node_modules/swiper/swiper-bundle.css",
]
...
...

3단계: App.Module.ts 파일에 코드 추가

이 단계에서는 src/app 디렉토리를 방문하여 app.module.ts 파일을 엽니다 . 그런 다음 app.module.ts 파일에 다음 줄을 추가합니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
 
import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';
 
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxUsefulSwiperModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
 
export class AppModule { }

4단계: 보기 파일에 코드 추가

이 단계에서는 각도 앱에서 스와이퍼 터치 캐러셀을 만듭니다 . 따라서 src/app/ 및 app.component.html을 방문하여 다음 코드를 업데이트하십시오.

<swiper [config]="config">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://loremflickr.com/g/600/400/paris" alt="img 1"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/600/400/brazil,rio" alt="img 2"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/600/400/paris,girl/all" alt="img 3"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/g/600/400/paris" alt="img 4"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/600/400/brazil,rio" alt="img 5"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/600/400/paris,girl/all" alt="img 6"></div>
  </div>
 
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
 
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</swiper>

5단계: app.Component ts 파일에 코드 추가

이 단계에서는 src/app 디렉터리를 방문하여 app.component.ts 를 엽니다 . 그런 다음 component.ts 파일에 다음 코드를 추가합니다.

import { Component } from '@angular/core';
import { SwiperOptions } from 'swiper';
 
     
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
 
export class AppComponent {
 
  config: SwiperOptions = {
    pagination: { 
      el: '.swiper-pagination', 
      clickable: true
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    spaceBetween: 30
  };  
   
}

6단계: Angular 앱 시작

이 단계에서는 터미널에서 다음 명령을 실행하여 각도 앱을 시작합니다.

ng serve

행복한 코딩!!!

2.30 GEEK