angular8 集成swiper， 并将swiper封装成公共组件

安装Swiper

npm install swiper --save

或者

yarn add swiper --save

在angular.json文件添加swiper.js和swiper.css

 

安装模组定义档

npm install @types/swiper --save

或者

yarn add @types/swiper --save

配置tsconfig文件

tsconfig.json

 

tsconfig.app.json

按照上面的配置完成后，angular里就可以用swiper。

ts

import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import {
  A11yOptions,
  AutoplayOptions,
  CoverflowEffectOptions,
  CubeEffectOptions,
  FadeEffectOptions,
  FlipEffectOptions,
  HashNavigationOptions,
  HistoryNavigationOptions,
  KeyboardOptions,
  LazyOptions,
  MousewheelOptions,
  NavigationOptions,
  PaginationOptions,
  ScrollbarOptions,
  SelectableElement,
  SwiperOptions,
  VirtualOptions,
  ZoomOptions
} from 'swiper';

declare let Swiper: any;

@Component({
  selector: 'cat-swiper-slide',
  templateUrl: './swiper-slide.component.html',
  styleUrls: ['./swiper-slide.component.scss']
})
export class SwiperSlideComponent implements OnInit, AfterViewInit {
  mySwiper: any;

  @ViewChild('paginationEl', {static: true}) paginationEl: ElementRef;
  @ViewChild('prevButtonEl', {static: true}) prevButtonEl: ElementRef;
  @ViewChild('nextButtonEl', {static: true}) nextButtonEl: ElementRef;

  @Input() containerClass: string;
  @Input() wrapperClass: string;
  @Input() sliderClass: string;
  @Input() paginationClass: string;
  @Input() buttonClass: string;
  @Input() scrollbarClass: string;

  @Input() items: any[] = [];

  /**
   * Index number of initial slide.
   */
  @Input() initialSlide: number;

  /**
   * Could be 'horizontal' or 'vertical' (for vertical slider).
   */
  @Input() direction: 'horizontal' | 'vertical';

  /**
   * Duration of transition between slides (in ms)
   */
  @Input() speed: number;

  /**
   * Enabled this option and plugin will set width/height on swiper wrapper equal to total size of all slides.
   * Mostly should be used as compatibility fallback option for browser that don't support flexbox layout well
   */
  @Input() setWrapperSize: boolean;

  /**
   * Enabled this option and swiper will be operated as usual except it will not move,
   * real translate values on wrapper will not be set.
   *
   * Useful when you may need to create custom slide transition
   */
  @Input() virtualTranslate: boolean;

  /**
   * Swiper width (in px).
   *
   * Parameter allows to force Swiper width. Useful only if you initialize Swiper when it is hidden.
   *
   * Setting this parameter will make Swiper not responsive
   */
  @Input() width: number;

  /**
   * Swiper height (in px).
   *
   * Parameter allows to force Swiper height. Useful only if you initialize Swiper when it is hidden.
   *
   * Setting this parameter will make Swiper not responsive
   */
  @Input() height: number;

  /**
   * Set to true and slider wrapper will adopt its height to the height of the currently active slide
   */
  @Input() autoHeight: boolean;

  /**
   * Set to true to round values of slides width and height to prevent blurry texts on usual resolution screens (if you have such)
   */
  @Input() roundLengths: boolean;

  /**
   * Set to true on nested Swiper for correct touch events interception.
   * Use only on nested swipers that use same direction as the parent one
   */
  @Input() nested: boolean;

  /**
   * If enabled (by default) and navigation elements' parameters passed as a string (like ".pagination")
   * then Swiper will look for such elements through child elements first.
   *
   * Applies for pagination, prev/next buttons and scrollbar elements
   */
  @Input() uniqueNavElements: boolean;

  /**
   * Tranisition effect. Could be "slide", "fade", "cube", "coverflow" or "flip"
   */
  @Input() effect: 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip';

  /**
   * Fire [Transition/SlideChange][Start/End] events on swiper initialization.
   * Such events will be fired on initialization in case of your initialSlide is not 0, or you use loop mode
   */
  @Input() runCallbacksOnInit: boolean;

  /**
   * When enabled Swiper will be disabled and hide navigation buttons on case there are not enough slides for sliding
   */
  @Input() watchOverflow: boolean;

  /**
   * Distance between slides in px.
   */

  @Input() spaceBetween: number;

  /**
   *  Number of slides per view (slides visible at the same time on slider's container).
   *  If you use it with "auto" value and along with loop: true
   *  then you need to specify loopedSlides parameter with amount of slides to loop (duplicate)
   */
  @Input() slidesPerView: number | 'auto';

  /**
   * Number of slides per column, for multirow layout
   */
  @Input() slidesPerColumn: number;

  /**
   * Could be 'column' or 'row'. Defines how slides should fill rows, by column or by row
   */
  @Input() slidesPerColumnFill: 'column' | 'row';

  /**
   * Set numbers of slides to define and enable group sliding. Useful to use with slidesPerView > 1
   */
  @Input() slidesPerGroup: number;

  /**
   * If true, then active slide will be centered, not always on the left side.
   */
  @Input() centeredSlides = false;

  /**
   *  Add (in px) additional slide offset in the beginning of the container (before all slides)
   */
  @Input() slidesOffsetBefore: number;

  /**
   * Add (in px) additional slide offset in the end of the container (after all slides)
   */
  @Input() slidesOffsetAfter: number;

  /**
   * Normalize slide index. See #1766
   */
  @Input() normalizeSlideIndex: boolean;

  /**
   *  When enabled it center slides if the amount of slides less than `slidesPerView`.
   *  Not intended to be used loop mode and slidesPerColumn
   */
  @Input() centerInsufficientSlides: boolean;

  /**
   * This option may a little improve desktop usability.
   * If true, user will see the "grab" cursor when hover on Swiper
   */
  @Input() grabCursor: boolean;

  /**
   * Target element to listen touch events on.
   *
   * Can be 'container' (to listen for touch events on swiper-container)
   * or 'wrapper' (to listen for touch events on swiper-wrapper)
   */

  @Input() touchEventsTarget: 'container' | 'wrapper';
  /**
   *  Touch ratio
   */
  @Input() touchRatio: number;
  /**
   *
   */
  @Input() touchAngle: number;
  /**
   *  If true, Swiper will accept mouse events like touch events (click and drag to change slides)
   */
  @Input() simulateTouch: boolean;
  /**
   *  Set to false if you want to disable short swipes
   */
  @Input() shortSwipes: boolean;
  /**
   *  Set to false if you want to disable long swipes
   */
  @Input() longSwipes: boolean;
  /**
   *  Ratio to trigger swipe to next/previous slide during long swipes
   */
  @Input() longSwipesRatio: number;
  /**
   *  Minimal duration (in ms) to trigger swipe to next/previous slide during long swipes
   */
  @Input() longSwipesMs: number;
  /**
   * If disabled, then slider will be animated only when you release it,
   * it will not move while you hold your finger on it
   */

  @Input() followFinger: boolean;
  /**
   *  If false, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
   */
  @Input() allowTouchMove: boolean;
  /**
   *  Threshold value in px. If "touch distance" will be lower than this value then swiper will not move
   */
  @Input() threshold: number;
  /**
   *  If disabled, `touchstart` (`mousedown`) event won't be prevented
   */
  @Input() touchStartPreventDefault: boolean;
  /**
   *  Force to always prevent default for `touchstart` (`mousedown`) event
   */
  @Input() touchStartForcePreventDefault: boolean;
  /**
   * If enabled, then propagation of "touchmove" will be stopped
   */
  @Input() touchMoveStopPropagation: boolean;
  /**
   * Enable to release Swiper events for swipe-to-go-back work in iOS UIWebView
   */
  @Input() iOSEdgeSwipeDetection: boolean;
  /**
   *  Area (in px) from left edge of the screen to release touch events for swipe-to-go-back in iOS UIWebView
   */
  @Input() iOSEdgeSwipeThreshold: number;
  /**
   *  Enable to release touch events on slider edge position (beginning, end) to allow for further page scrolling
   */
  @Input() touchReleaseOnEdges: boolean;
  /**
   *  Passive event listeners will be used by default where possible to improve scrolling performance on
   *  mobile devices.
   *
   *  But if you need to use `e.preventDefault` and you have conflict with it,
   *  then you should disable this parameter
   */
  @Input() passiveListeners: boolean;

  /**
   * Set to false if you want to disable resistant bounds
   */
  @Input() resistance: boolean;

  /**
   * This option allows you to control resistance ratio
   */
  @Input() resistanceRatio: number;

  // Swiping / No swiping
  @Input() preventInteractionOnTransition: boolean;
  @Input() allowSlidePrev: boolean;
  @Input() allowSlideNext: boolean;
  @Input() noSwiping: boolean;
  @Input() noSwipingClass: string;
  @Input() noSwipingSelector: string;
  @Input() swipeHandler: SelectableElement;

  // Clicks
  @Input() preventClicks: boolean;
  @Input() preventClicksPropagation: boolean;
  @Input() slideToClickedSlide: boolean;

  // Freemode
  @Input() freeMode: boolean;
  @Input() freeModeMomentum: boolean;
  @Input() freeModeMomentumRatio: number;
  @Input() freeModeMomentumVelocityRatio: number;
  @Input() freeModeMomentumBounce: boolean;
  @Input() freeModeMomentumBounceRatio: number;
  @Input() freeModeMinimumVelocity: number;
  @Input() freeModeSticky: boolean;

  // Progress
  @Input() watchSlidesProgress: boolean;
  @Input() watchSlidesVisibility: boolean;

  // Images
  @Input() preloadImages: boolean;
  @Input() updateOnImagesReady: boolean;

  // Loop
  @Input() loop: boolean;
  @Input() loopAdditionalSlides: number;
  @Input() loopedSlides: number;
  @Input() loopFillGroupWithBlank: boolean;

  // Breakpoints
  @Input() breakpoints: {
    [index: number]: SwiperOptions;
  };
  @Input() breakpointsInverse: boolean;

  // Observer
  @Input() observer: boolean;
  @Input() observeParents: boolean;

  // Namespace
  @Input() containerModifierClass: string;
  @Input() slideActiveClass: string;
  @Input() slideDuplicateActiveClass: string;
  @Input() slideVisibleClass: string;
  @Input() slideDuplicateClass: string;
  @Input() slideNextClass: string;
  @Input() slideDuplicateNextClass: string;
  @Input() slidePrevClass: string;
  @Input() slideDuplicatePrevClass: string;

  // Components
  @Input() navigation: NavigationOptions | boolean;
  @Input() pagination: PaginationOptions | boolean;
  @Input() scrollbar: ScrollbarOptions;
  @Input() autoplay: AutoplayOptions | boolean;
  @Input() parallax: boolean;
  @Input() lazy: LazyOptions | boolean;
  @Input() fadeEffect: FadeEffectOptions;
  @Input() coverflowEffect: CoverflowEffectOptions;
  @Input() flipEffect: FlipEffectOptions;
  @Input() cubeEffect: CubeEffectOptions;
  @Input() zoom: ZoomOptions | boolean;
  @Input() keyboard: KeyboardOptions | boolean;
  @Input() mousewheel: MousewheelOptions | boolean;
  @Input() virtual: VirtualOptions | boolean;
  @Input() hashNavigation: HashNavigationOptions | boolean;
  @Input() history: HistoryNavigationOptions | boolean;
  @Input() a11y: A11yOptions | boolean;

  // Event will be fired when currently active slide is changed
  @Output() swiperSlideChange: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired in the beginning of animation to other slide (next or previous).
  @Output() swiperSlideChangeTransitionStart: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired after animation to other slide (next or previous).
  @Output() swiperSlideChangeTransitionEnd: EventEmitter<any> = new EventEmitter<any>();
  // Same as "slideChangeTransitionStart" but for "forward" direction only
  @Output() swiperSlideNextTransitionStart: EventEmitter<any> = new EventEmitter<any>();
  // Same as "slideChangeTransitionEnd" but for "forward" direction only
  @Output() swiperSlideNextTransitionEnd: EventEmitter<any> = new EventEmitter<any>();
  // Same as "slideChangeTransitionStart" but for "backward" direction only
  @Output() swiperSlidePrevTransitionStart: EventEmitter<any> = new EventEmitter<any>();
  // Same as "slideChangeTransitionEnd" but for "backward" direction only
  @Output() swiperSlidePrevTransitionEnd: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired in the beginning of transition.
  @Output() swiperTransitionStart: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired after transition.
  @Output() swiperTransitionEnd: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired when user touch Swiper. Receives 'touchstart' event as an arguments.
  @Output() swiperTouchStart: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter.
  // Receives 'touchmove' event as an arguments.
  @Output() swiperTouchMoveOpposite: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired when user touch and move finger over Swiper and move it. Receives 'touchmove' event as an arguments.
  @Output() swiperSliderMove: EventEmitter<any> = new EventEmitter<any>();

  // Event will be fired when user touch and move finger over Swiper. Receives 'touchmove' event as an arguments.
  @Output() swiperTouchMove: EventEmitter<any> = new EventEmitter<any>();

  // Event will be fired when user release Swiper. Receives 'touchend' event as an arguments.
  @Output() swiperTouchEnd: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired when user click/tap on Swiper after 300ms delay. Receives 'touchend' event as an arguments.
  @Output() swiperClick: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired when user click/tap on Swiper. Receives 'touchend' event as an arguments.
  @Output() swiperTap: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired when user double tap on Swiper's container. Receives 'touchend' event as an arguments
  @Output() swiperDoubleTap: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired right after all inner images are loaded. updateOnImagesReady should be also enabled
  @Output() swiperImagesReady: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1
  @Output() swiperProgress: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired when Swiper reach its beginning (initial position)
  @Output() swiperReachBeginning: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired when Swiper reach its beginning (initial position)
  @Output() swiperReachEnd: EventEmitter<any> = new EventEmitter<any>();
  // Event will be fired when Swiper reach last slide
  // Event will be fired when Swiper goes from beginning or end position
  @Output() swiperFromEdge: EventEmitter<any> = new EventEmitter<any>();

  constructor(
    private elementRef: ElementRef,
  ) {
  }

  ngOnInit() {
    setTimeout(() => {
      this.initSwiper();
    }, 20);
  }

  ngAfterViewInit() {

  }

  initSwiper() {
    // this.mySwiper = new Swiper('.swiper-container', {
    //   slidesPerView: 'auto',
    //   freeMode: true,
    //   loop: true,
    //   autoplayDisableOnInteraction: false,
    //   observer: true, // 修改swiper自己或子元素时，自动初始化swiper
    //   observeParents: true, // 修改swiper的父元素时，自动初始化swiper
    //
    // });
    let container: HTMLElement = this.elementRef.nativeElement.querySelector('.swiper-container');

    this.mySwiper = new Swiper(container, this.buildOption());
  }

  private buildOption(): SwiperOptions {
    let opt: SwiperOptions = {
      initialSlide: this.initialSlide,
      direction: this.direction,
      speed: this.speed,
      setWrapperSize: this.setWrapperSize,
      virtualTranslate: this.virtualTranslate,
      width: this.width,
      height: this.height,
      autoHeight: this.autoHeight,
      roundLengths: this.roundLengths,
      nested: this.nested,
      uniqueNavElements: this.uniqueNavElements,
      effect: this.effect,
      runCallbacksOnInit: this.runCallbacksOnInit,
      watchOverflow: this.watchOverflow,
      spaceBetween: this.spaceBetween,
      slidesPerView: this.slidesPerView,
      slidesPerColumn: this.slidesPerColumn,
      slidesPerColumnFill: this.slidesPerColumnFill,
      slidesPerGroup: this.slidesPerGroup,
      centeredSlides: this.centeredSlides,
      slidesOffsetBefore: this.slidesOffsetBefore,
      slidesOffsetAfter: this.slidesOffsetAfter,
      normalizeSlideIndex: this.normalizeSlideIndex,
      centerInsufficientSlides: this.centerInsufficientSlides,
      grabCursor: this.grabCursor,
      touchEventsTarget: this.touchEventsTarget,
      touchRatio: this.touchRatio,
      touchAngle: this.touchAngle,
      simulateTouch: this.simulateTouch,
      shortSwipes: this.shortSwipes,
      longSwipes: this.longSwipes,
      longSwipesRatio: this.longSwipesRatio,
      longSwipesMs: this.longSwipesMs,
      followFinger: this.followFinger,
      allowTouchMove: this.allowTouchMove,
      threshold: this.threshold,
      touchStartPreventDefault: this.touchStartPreventDefault,
      touchStartForcePreventDefault: this.touchStartForcePreventDefault,
      touchMoveStopPropagation: this.touchMoveStopPropagation,
      iOSEdgeSwipeDetection: this.iOSEdgeSwipeDetection,
      iOSEdgeSwipeThreshold: this.iOSEdgeSwipeThreshold,
      touchReleaseOnEdges: this.touchReleaseOnEdges,
      passiveListeners: this.passiveListeners,
      resistance: this.resistance,
      resistanceRatio: this.resistanceRatio,
      preventInteractionOnTransition: this.preventInteractionOnTransition,
      allowSlidePrev: this.allowSlidePrev,
      allowSlideNext: this.allowSlideNext,
      noSwiping: this.noSwiping,
      noSwipingClass: this.noSwipingClass,
      noSwipingSelector: this.noSwipingSelector,
      swipeHandler: this.swipeHandler,
      preventClicks: this.preventClicks,
      preventClicksPropagation: this.preventClicksPropagation,
      slideToClickedSlide: this.slideToClickedSlide,
      freeMode: this.freeMode,
      freeModeMomentum: this.freeModeMomentum,
      freeModeMomentumRatio: this.freeModeMomentumRatio,
      freeModeMomentumVelocityRatio: this.freeModeMomentumVelocityRatio,
      freeModeMomentumBounce: this.freeModeMomentumBounce,
      freeModeMomentumBounceRatio: this.freeModeMomentumBounceRatio,
      freeModeMinimumVelocity: this.freeModeMinimumVelocity,
      freeModeSticky: this.freeModeSticky,
      watchSlidesProgress: this.watchSlidesProgress,
      watchSlidesVisibility: this.watchSlidesVisibility,
      preloadImages: this.preloadImages,
      updateOnImagesReady: this.updateOnImagesReady,
      loop: this.loop, // 是否是无缝轮播
      loopAdditionalSlides: this.loopAdditionalSlides,
      loopedSlides: this.loopedSlides,
      loopFillGroupWithBlank: this.loopFillGroupWithBlank,
      breakpoints: this.breakpoints,
      breakpointsInverse: this.breakpointsInverse,
      observer: this.observer, // 修改swiper自己或子元素时，自动初始化swiper
      observeParents: this.observeParents, // 修改swiper的父元素时，自动初始化swiper
      containerModifierClass: this.containerModifierClass,
      slideActiveClass: this.slideActiveClass,
      slideDuplicateActiveClass: this.slideDuplicateActiveClass,
      slideVisibleClass: this.slideVisibleClass,
      slideDuplicateClass: this.slideDuplicateClass,
      slideNextClass: this.slideNextClass,
      slideDuplicateNextClass: this.slideDuplicateNextClass,
      slidePrevClass: this.slidePrevClass,
      slideDuplicatePrevClass: this.slideDuplicatePrevClass,
      wrapperClass: this.wrapperClass,
      // Components
      // navigation: this.navigation,
      // pagination: this.pagination,
      scrollbar: this.scrollbar,
      autoplay: this.autoplay,
      parallax: this.parallax,
      lazy: this.lazy,
      fadeEffect: this.fadeEffect,
      coverflowEffect: this.coverflowEffect,
      flipEffect: this.flipEffect,
      cubeEffect: this.cubeEffect,
      zoom: this.zoom,
      keyboard: this.keyboard,
      mousewheel: this.mousewheel,
      virtual: this.virtual,
      hashNavigation: this.hashNavigation,
      history: this.history,
      a11y: this.a11y,
    };

    if (this.pagination === true) {
      opt.pagination = {
        el: this.paginationEl.nativeElement, // 分页器，就是小点的位置
        type: 'bullets',
        clickable: true,
      };
    }

    if (this.loop === true) {
      let slidesPerView: number = Number(this.slidesPerView);
      if (slidesPerView) {
        opt.loopAdditionalSlides = slidesPerView + 1;
      }
    }

    if (this.autoplay === true) {
      opt.autoplay = {
        delay: 2000, // 2秒切换一次
        disableOnInteraction: false, // 鼠标滑动后继续停止播放
      };
    }

    if (this.navigation === true) {
      opt.navigation = {
        nextEl: this.nextButtonEl.nativeElement, // 下一张箭头位置
        prevEl: this.prevButtonEl.nativeElement, // 上一张箭头位置
      };
    }

    // if (this.scrollbar === true) {
    //   opt.scrollbar = {
    //     el: this.scrollbarEl.nativeElement, // 滚动条位置
    //   };
    // }

    Object.keys(opt)
      .forEach(key => {
        if (opt[key] === void 0) {
          delete opt[key];
        }
      });
    console.log(opt);

    return opt;
  }
}

html

<!-- Slider main container -->
<div class="swiper-container" [ngClass]="containerClass">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper" [ngClass]="wrapperClass">
    <ng-content></ng-content>
  </div>

  <!-- If we need pagination -->
  <div class="swiper-pagination" [ngClass]="paginationClass" [hidden]="!pagination" #paginationEl></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev" [ngClass]="buttonClass" [hidden]="!navigation" #prevButtonEl></div>
  <div class="swiper-button-next" [ngClass]="buttonClass" [hidden]="!navigation" #nextButtonEl></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar" [ngClass]="scrollbarClass" *ngIf="scrollbar"></div>
</div>

css

:host {
  display: block;
  height: 100%;
}

.swiper-container {
  height: 100%;
}

使用：

<cat-swiper-slide direction="horizontal" [navigation]="true" [pagination]="false"
                  [loop]="true" [autoplay]="true" [speed]="450"
                  [grabCursor]="true" [spaceBetween]="20"
                  [observer]="true" [observeParents]="true" [slidesPerView]="2.5"
                  *ngIf="projects.length">
  <div *ngFor="let item of photoNews" class="swiper-slide self-slide">
        // 滑动块内的内容
    <div class="image-bg h-100" [nsBackgroundImage]="item.photo"></div>
    <div class="pos-absolute b-0 pd-b-30 w-100 text-center tx-white bg-black-4">
      {{item.subject}}
    </div>
  </div>
</cat-swiper-slide>