import { ChangeDetectionStrategy , Component , ElementRef , EventEmitter , Input , NgZone , Optional , Output , Renderer , ViewEncapsulation } from '@angular/core' ; import { Config } from '../../config/config' ; import { enableKeyboardControl } from './swiper/swiper-keyboard' ; import { Ion } from '../ion' ; import { isTrueProperty } from '../../util/util' ; import { initEvents } from './swiper/swiper-events' ; import { initZoom } from './swiper/swiper-zoom' ; import { Platform } from '../../platform/platform' ; import { SlideContainer , SlideElement , SlideTouchEvents , SlideTouches , SlideZoom } from './swiper/swiper-interfaces' ; import { destroySwiper , initSwiper , slideNext , slidePrev , slideTo , startAutoplay , stopAutoplay , update , } from './swiper/swiper' ; import { SWIPER_EFFECTS } from './swiper/swiper-effects' ; import { ViewController } from '../../navigation/view-controller' ; name description usage ViewChild advanced ViewChild demo see {@link /docs/components#slides Slides Component Docs} *
 * Adopted from Swiper.js:
 * The most modern mobile touch slider and framework with
 * hardware accelerated transitions.
 *
 * http://www.idangero.us/swiper/
 *
 * Copyright 2016, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us/
 *
 * Licensed under MIT
  @ Component ( { selector : 'ion-slides' , template : '<div class="swiper-container" [attr.dir]="_rtl? \'rtl\' : null">' + '<div class="swiper-wrapper">' + '<ng-content></ng-content>' + '</div>' + '<div [class.hide]="!pager" class="swiper-pagination"></div>' + '</div>' , changeDetection : ChangeDetectionStrategy . OnPush , encapsulation : ViewEncapsulation . None , } ) export class Slides extends Ion { input @ Input ( ) get autoplay ( ) { return this . _autoplayMs ; } set autoplay ( val ) { this . _autoplayMs = parseInt ( val , 10 ) ; } private _autoplayMs : number ; input @ Input ( ) get control ( ) { return this . _control ; } set control ( val ) { if ( val instanceof Slides || Array . isArray ( val ) ) { this . _control = val ; } } private _control : Slides | Slides [ ] = null ; input @ Input ( ) get effect ( ) { return this . _effectName ; } set effect ( effectName ) { if ( SWIPER_EFFECTS [ effectName ] ) { this . _effectName = effectName ; } } private _effectName = 'slide' ; input @ Input ( ) get direction ( ) { return this . _direction ; } set direction ( val ) { if ( val === 'horizontal' || val === 'vertical' ) { this . _direction = val ; } } private _direction = 'horizontal' ; input @ Input ( ) get initialSlide ( ) { return this . _initialSlide ; } set initialSlide ( val ) { this . _initialSlide = parseInt ( val , 10 ) ; } private _initialSlide = 0 ; input @ Input ( ) get loop ( ) { return this . _isLoop ; } set loop ( val ) { this . _isLoop = isTrueProperty ( val ) ; } private _isLoop = false ; input @ Input ( ) get pager ( ) { return this . _pager ; } set pager ( val ) { this . _pager = isTrueProperty ( val ) ; } private _pager = false ; input @ Input ( ) set dir ( val ) { this . _rtl = ( val . toLowerCase ( ) === 'rtl' ) ; } input @ Input ( ) get paginationType ( ) { return this . _paginationType ; } set paginationType ( val ) { if ( val === 'bullets' || val === 'fraction' || val === 'progress' ) { this . _paginationType = val ; } } private _paginationType = 'bullets' ; hidden paginationBulletRender : ( index ? : number , cssClass ? : string ) => void = null ; input @ Input ( ) get parallax ( ) { return this . _isParallax ; } set parallax ( val ) { this . _isParallax = isTrueProperty ( val ) ; } private _isParallax = false ; input @ Input ( ) get speed ( ) { return this . _speedMs ; } set speed ( val ) { this . _speedMs = parseInt ( val , 10 ) ; } private _speedMs = 300 ; input @ Input ( ) get zoom ( ) { return this . _isZoom ; } set zoom ( val ) { this . _isZoom = isTrueProperty ( val ) ; } private _isZoom = false ; hidden height : number ; hidden width : number ; hidden virtualTranslate = false ; hidden roundLengths = false ; input @ Input ( ) get spaceBetween ( ) { return this . _spaceBetween ; } set spaceBetween ( val ) { this . _spaceBetween = parseInt ( val , 10 ) ; } private _spaceBetween = 0 ; input @ Input ( ) get slidesPerView ( ) { return this . _slidesPerView ; } set slidesPerView ( val ) { this . _slidesPerView = val === 'auto' ? 'auto' : parseFloat ( val ) ; } private _slidesPerView : number | string = 1 ; input @ Input ( ) get centeredSlides ( ) { return this . _centeredSlides ; } set centeredSlides ( val ) { this . _centeredSlides = isTrueProperty ( val ) ; } private _centeredSlides : boolean = false ; hidden slidesPerColumn = 1 ; hidden slidesPerColumnFill = 'column' ; hidden slidesPerGroup = 1 ; hidden slidesOffsetBefore = 0 ; hidden slidesOffsetAfter = 0 ; hidden touchEventsTarget : 'container' ; hidden autoplayDisableOnInteraction = true ; hidden autoplayStopOnLast = false ; hidden freeMode = false ; hidden freeModeMomentum = true ; hidden freeModeMomentumRatio = 1 ; hidden freeModeMomentumBounce = true ; hidden freeModeMomentumBounceRatio = 1 ; hidden freeModeMomentumVelocityRatio = 1 ; hidden freeModeSticky = false ; hidden freeModeMinimumVelocity = 0.02 ; hidden autoHeight = false ; hidden setWrapperSize = false ; hidden zoomMax = 3 ; hidden zoomMin = 1 ; hidden zoomToggle = true ; hidden touchRatio = 1 ; hidden touchAngle = 45 ; hidden simulateTouch = true ; hidden shortSwipes = true ; hidden longSwipes = true ; hidden longSwipesRatio = 0.5 ; hidden longSwipesMs = 300 ; hidden followFinger = true ; hidden onlyExternal = false ; hidden threshold = 0 ; hidden touchMoveStopPropagation = true ; hidden touchReleaseOnEdges = false ; hidden iOSEdgeSwipeDetection = false ; hidden iOSEdgeSwipeThreshold = 20 ; hidden paginationClickable = false ; hidden paginationHide = false ; hidden resistance = true ; hidden resistanceRatio = 0.85 ; hidden watchSlidesProgress = false ; hidden watchSlidesVisibility = false ; hidden preventClicks = true ; hidden preventClicksPropagation = true ; hidden slideToClickedSlide = false ; hidden loopAdditionalSlides = 0 ; hidden loopedSlides : number = null ; hidden swipeHandler : any = null ; hidden noSwiping = true ; hidden runCallbacksOnInit = true ; controlBy = 'slide' ; controlInverse = false ; hidden keyboardControl = true ; hidden coverflow = { rotate : 50 , stretch : 0 , depth : 100 , modifier : 1 , slideShadows : true } ; hidden flip = { slideShadows : true , limitRotation : true } ; hidden cube = { slideShadows : true , shadow : true , shadowOffset : 20 , shadowScale : 0.94 } ; hidden fade = { crossFade : false } ; hidden prevSlideMessage = 'Previous slide' ; hidden nextSlideMessage = 'Next slide' ; hidden firstSlideMessage = 'This is the first slide' ; hidden lastSlideMessage = 'This is the last slide' ; hidden originalEvent : any ; output @ Output ( ) ionSlideWillChange : EventEmitter < Slides > = new EventEmitter ( ) ; output @ Output ( ) ionSlideDidChange : EventEmitter < Slides > = new EventEmitter ( ) ; output @ Output ( ) ionSlideDrag : EventEmitter < Slides > = new EventEmitter ( ) ; output @ Output ( ) ionSlideReachStart : EventEmitter < Slides > = new EventEmitter ( ) ; output @ Output ( ) ionSlideReachEnd : EventEmitter < Slides > = new EventEmitter ( ) ; output @ Output ( ) ionSlideAutoplay : EventEmitter < Slides > = new EventEmitter ( ) ; output @ Output ( ) ionSlideAutoplayStart : EventEmitter < Slides > = new EventEmitter ( ) ; output @ Output ( ) ionSlideAutoplayStop : EventEmitter < Slides > = new EventEmitter ( ) ; output @ Output ( ) ionSlideNextStart : EventEmitter < Slides > = new EventEmitter ( ) ; output @ Output ( ) ionSlidePrevStart : EventEmitter < Slides > = new EventEmitter ( ) ; output @ Output ( ) ionSlideNextEnd : EventEmitter < Slides > = new EventEmitter ( ) ; output @ Output ( ) ionSlidePrevEnd : EventEmitter < Slides > = new EventEmitter ( ) ; output @ Output ( ) ionSlideTap : EventEmitter < Slides > = new EventEmitter ( ) ; output @ Output ( ) ionSlideDoubleTap : EventEmitter < Slides > = new EventEmitter ( ) ; hidden ionSlideProgress : EventEmitter < number > = new EventEmitter ( ) ; hidden ionSlideTransitionStart : EventEmitter < Slides > = new EventEmitter ( ) ; hidden ionSlideTransitionEnd : EventEmitter < Slides > = new EventEmitter ( ) ; hidden ionSlideTouchStart : EventEmitter < TouchEvent > = new EventEmitter ( ) ; hidden ionSlideTouchEnd : EventEmitter < TouchEvent > = new EventEmitter ( ) ; /**
     * Private properties only useful to this class.
     * ------------------------------------
     */ private _init : boolean ; private _tmr : number ; private _unregs : Function [ ] = [ ] ; /**
     * Properties that are exposed publically but no docs.
     * ------------------------------------
     */ hidden clickedIndex : number ; hidden clickedSlide : SlideElement ; hidden container : SlideContainer ; hidden id : number ; hidden progress : number ; hidden realIndex : number ; hidden renderedHeight : number ; hidden renderedWidth : number ; hidden slideId : string ; hidden swipeDirection : string ; hidden velocity : number ; /**
     * Properties which are for internal use only
     * and not exposed to the public
     * ------------------------------------
     */ internal _activeIndex : number ; internal _allowClick : boolean ; internal _allowSwipeToNext = true ; internal _allowSwipeToPrev = true ; internal _animating : boolean ; internal _autoplaying : boolean ; internal _autoplayPaused : boolean ; internal _autoplayTimeoutId : number ; internal _bullets : HTMLElement [ ] ; internal _classNames : string [ ] ; internal _isBeginning : boolean ; internal _isEnd : boolean ; internal _keyboardUnReg : Function ; internal _liveRegion : HTMLElement ; internal _paginationContainer : HTMLElement ; internal _previousIndex : number ; internal _renderedSize : number ; internal _rtl : boolean ; internal _slides : SlideElement [ ] ; internal _snapGrid : any ; internal _slidesGrid : any ; internal _snapIndex : number ; internal _slidesSizesGrid : any ; internal _spline : any ; internal _supportTouch : boolean ; internal _supportGestures : boolean ; internal _touches : SlideTouches ; internal _touchEvents : SlideTouchEvents ; internal _touchEventsDesktop : SlideTouchEvents ; internal _translate : number ; internal _virtualSize : any ; internal _wrapper : HTMLElement ; internal _zone : NgZone ; internal _zoom : SlideZoom ; hidden nextButton : HTMLElement ; hidden prevButton : HTMLElement ; constructor ( config , private _plt , zone , @ Optional ( ) viewCtrl , elementRef , renderer ) { super ( config , elementRef , renderer , 'slides' ) ; this . _zone = zone ; this . id = ++ slidesId ; this . slideId = 'slides-' + this . id ; this . setElementClass ( this . slideId , true ) ; if ( viewCtrl ) { var subscription = viewCtrl . readReady . subscribe ( ( ) => { subscription . unsubscribe ( ) ; this . _initSlides ( ) ; } ) ; } } private _initSlides ( ) { if ( ! this . _init ) { console . debug ( `ion-slides, init` ) ; var s = this ; var plt = s . _plt ; s . container = this . getNativeElement ( ) . children [ 0 ] ; initSwiper ( s , plt ) ; this . _unregs . push ( initEvents ( s , plt ) ) ; if ( this . zoom ) { this . _unregs . push ( initZoom ( s , plt ) ) ; } if ( this . keyboardControl ) { s . enableKeyboardControl ( true ) ; } this . _init = true ; } } hidden ngAfterContentInit ( ) { this . _plt . timeout ( ( ) => { this . _initSlides ( ) ; } , 300 ) ; } /**
     * Update the underlying slider implementation. Call this if you've added or removed
     * child slides.
     */ update ( debounce = 300 ) { if ( this . _init ) { this . _plt . cancelTimeout ( this . _tmr ) ; this . _tmr = this . _plt . timeout ( ( ) => { update ( this , this . _plt ) ; if ( this . length ( ) > 10 ) { this . paginationType = undefined ; } } , debounce ) ; } } resize ( ) { if ( this . _init ) { } } param { number } index param { number } speed param { boolean } runCallbacks slideTo ( index , speed ? , runCallbacks ? ) { slideTo ( this , this . _plt , index , speed , runCallbacks ) ; } param { number } speed param { boolean } runCallbacks slideNext ( speed ? , runCallbacks ? ) { slideNext ( this , this . _plt , runCallbacks , speed , true ) ; } param { number } speed param { boolean } runCallbacks slidePrev ( speed ? , runCallbacks ? ) { slidePrev ( this , this . _plt , runCallbacks , speed , true ) ; } returns { number } getActiveIndex ( ) { return this . _activeIndex ; } returns { number } getPreviousIndex ( ) { return this . _previousIndex ; } returns { number } length ( ) { return this . _slides . length ; } returns { boolean } isEnd ( ) { return this . _isEnd ; } returns { boolean } isBeginning ( ) { return this . _isBeginning ; } /**
     * Start auto play.
     */ startAutoplay ( ) { startAutoplay ( this , this . _plt ) ; } /**
     * Stop auto play.
     */ stopAutoplay ( ) { stopAutoplay ( this ) ; } param { boolean } shouldLockSwipeToNext lockSwipeToNext ( shouldLockSwipeToNext ) { this . _allowSwipeToNext = ! shouldLockSwipeToNext ; } param { boolean } shouldLockSwipeToPrev lockSwipeToPrev ( shouldLockSwipeToPrev ) { this . _allowSwipeToPrev = ! shouldLockSwipeToPrev ; } param { boolean } shouldLockSwipes lockSwipes ( shouldLockSwipes ) { this . _allowSwipeToNext = this . _allowSwipeToPrev = ! shouldLockSwipes ; } param { boolean } shouldEnableKeyboard enableKeyboardControl ( shouldEnableKeyboard ) { enableKeyboardControl ( this , this . _plt , shouldEnableKeyboard ) ; } hidden ngOnDestroy ( ) { this . _init = false ; this . _unregs . forEach ( unReg => { unReg ( ) ; } ) ; this . _unregs . length = 0 ; destroySwiper ( this ) ; this . enableKeyboardControl ( false ) ; } } let slidesId = - 1 ;