Angularのスワイパー

Swiper Angular

インストール：

npm install ngx-swiper-wrapper -s

app.module.ts内：

import { SwiperModule } from 'ngx-swiper-wrapper' import { SWIPER_CONFIG } from 'ngx-swiper-wrapper' import { SwiperConfigInterface } from 'ngx-swiper-wrapper' const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = { direction: 'horizontal', slidesPerView: 'auto' } @NgModule({ Declarations: [/ / source data, can only declare components, directives and pipes AppComponent ], imports: [ BrowserModule, / / ​​development web prerequisite module SwiperModule ], providers: [{ provide: SWIPER_CONFIG, useValue: DEFAULT_SWIPER_CONFIG }], / / ​​can only declare the service bootstrap: [AppComponent] }) export class AppModule { }

最後に、コンポーネントにスタイルを導入します。

@import '~swiper/dist/css/swiper.min.css'

コンポーネントのスワイパー構成を変更します。

import { Component, OnInit } from '@angular/core' import { SwiperConfigInterface } from 'ngx-swiper-wrapper' @Component({ selector: 'app-nav', templateUrl: './nav.component.html', styleUrls: ['./nav.component.css'] }) export class NavComponent implements OnInit { constructor() { } List = ['recommended', 'video', 'funny'] config: SwiperConfigInterface ngOnInit() { this.config = { slidesPerView: 5, spaceBetween: 50, pagination: { el: '.swiper-pagination', clickable: true, }, breakpoints: { 1024: { slidesPerView: 4, spaceBetween: 40, }, 768: { slidesPerView: 3, spaceBetween: 30, }, 640: { slidesPerView: 2, spaceBetween: 20, }, 320: { slidesPerView: 1, spaceBetween: 10, } } } } }