由标准angular/cli项目生成的 swiper项目

html用法

<link href="//cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">

<div class="index">
  <meepo-slides
    [options]="swiperOptions"
    [items]="swiperItems"
    (success)="initSwiperSuccess($event)"
  ></meepo-slides>
  <meepo-slides-water></meepo-slides-water>
</div>

引入模块

import { SlidesModule } from 'imeepos-angular-swiper';
@NgModule({
  imports: [
    SlidesModule
  ]
})
export class AppModule { }

使用案例

import { Component } from '@angular/core';
import {initSlidesOptions, SlidesOptions } from "./slides/slides/slides.component";
interface Swiper{
  options: SlidesOptions;
  items: any[];
  success: Function;
}
@Component({
  selector: 'meepo-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  swiper1: Swiper;
  swiper: any; //返回控制器

  constructor(){
    this.initSwiperOption();
    // setInterval(()=>{
    //   this.swiper1.items.push({
    //     image: '/assets/1.jpg',
    //     handler: (item)=>{
    //       console.log(item)
    //     }
    //   })
    // }, 10000)
  }

  initSwiperOption(){
    const opt = initSlidesOptions();
    opt.slidesPerView = 1;
    this.swiper1 = {
      options: opt,
      items: [{
        image: '/assets/1.jpg',
        handler: (item) => {
          console.log(item)
        }
      },{
        image: '/assets/2.jpg',
        handler: (item) => {
          console.log(item)
        }
      },{
        image: '/assets/3.jpg',
        handler: (item) => {
          console.log(item)
        }
      }],
      success: (swiper) => {
        this.swiper = swiper;
      }
    }
  }
}