[Ionic 5] Ionic Infinite Slide

# 개요

fullcalendar library가 기본적으로, swipe를 제공하지 않는 관계로, 여러가지 hammer.js 라이브러리 등을 시도해본 결과, 결국은 ionic slides를 사용하는 것이 가장 안정적인 방법으로 결론이 났다. 많은 검색을 해보았지만... 아래 방법이 지금까지는 최선인 듯하다. Best Practice를 구하고 싶었으나, 세상은 그렇게 호락호락하지 않았다.

# 요건

- 성능 저하를 최소화할 것

- swipe 모션이 정확하면서, 기타 기능을 저해하지 않을 것

# 수정사항

- mousedown 이벤트는 브라우저에만 해당하므로, pointerdown이라는 이벤트 함수로 변경(touch screen이나 mouse에서 동시에 작동함)

# component.html

<ion-header>

  <ion-toolbar>

    <ion-title>swipetest2</ion-title>

  </ion-toolbar>

</ion-header>

<ion-content padding (pointerdown)="onMousedown()">

  <ion-slides [options]="slidesOptions" (ionSlideDidChange)="rotate()" (ionSlideDrag)="onSlideDrag()">

      <ion-slide>

        <div class="number">{{nums[0]}}</div>

      </ion-slide>

      <ion-slide>

        <div class="number">{{nums[1]}}</div>

      </ion-slide>

      <ion-slide>

        <div class="number">{{nums[2]}}</div>

      </ion-slide>

  </ion-slides>

</ion-content>

# component.ts

import { Component, OnInit, ViewChild } from '@angular/core';

import { IonSlides } from '@ionic/angular';

@Component({

  selector: 'app-swipertest',

  templateUrl: './swipertest.page.html',

  styleUrls: ['./swipertest.page.scss'],

})

export class SwipertestPage {

  @ViewChild(IonSlides) slides: IonSlides;

  appName = 'Swipe Me Fast!';

  isFirstChange = false;

  nums = [0,1,2];

  

  slidesOptions: object = {

    initialSlide: 1,

    speed : 300,

    pager : false,

    loop : true

  };

  constructor() {}

  rotate() {

      this.slides.getActiveIndex().then(sliderIndex =>{

        if (sliderIndex <= 0) {

          // Shift data to right

          this.nums[2] = this.nums[1];

          this.nums[1] = this.nums[0];

          // Decrement last elem

          this.nums[0]--;

          

      } else if (sliderIndex >= 2) {

          // Shift data to left

          this.nums[0] = this.nums[1];

          this.nums[1] = this.nums[2];

          // Increment last elem

          this.nums[2]++;

      }

      

      // Set slide in view back to center

      this.slides.slideTo(1, 0, false);

      });

     

      

  }

  onSlideDrag() {

    if (this.isFirstChange) {

      this.isFirstChange = false;

      this.rotate();

    }

  }

  

  onMousedown() {

    this.isFirstChange = true;

  }

}

# 출처

- https://forum.ionicframework.com/t/slides-ionslidedidchange-not-triggered/105970/6

- http://plnkr.co/edit/ED3Ju0jIeVnbcvFNQVmb?preview

- https://stackoverflow.com/questions/21009821/how-to-implement-a-onmousedown-and-onmouseup-on-a-touch-screen-iphone