Angular中使用swiper

安装：

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: [// 源数据，只能声明组件、指令和管道
    AppComponent
  ],
  imports: [
    BrowserModule,//开发web必备模块
    SwiperModule
  ],
  providers: [{ 
      provide: SWIPER_CONFIG, 
      useValue: DEFAULT_SWIPER_CONFIG
    }],//只能声明服务
  bootstrap: [AppComponent]
})
export class AppModule { }

最后在组件中引入样式：

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

修改swiper配置则在组件中：

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 = ['推荐','视频','搞笑'];
  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,
          }
        }
      }
  }
}