Open stalniy opened 8 years ago
Thanks for link! I like it very much, I will try add such things here :)
Hi, is there any update for this enhancement feature?
Current priorities Datepicker - Typeahead - modal service Than will go all mobile enhancements
any update on this?
For those desperately awaiting this rather essential feature, I created a directive for this based on the code found here https://github.com/maaaaark/bcSwipe/blob/master/jquery.bcSwipe.js :
import { Directive, Host, Self, Optional, Input, Renderer2, OnInit, ElementRef } from '@angular/core';
import { CarouselComponent } from 'ngx-bootstrap';
@Directive({
selector: '[appCarouselSwipe]'
})
export class AppCarouselSwipeDirective implements OnInit {
@Input() swipeThreshold = 50;
private start: number;
private stillMoving: boolean;
private moveListener: Function;
constructor(
@Host() @Self() @Optional() private carousel: CarouselComponent,
private renderer: Renderer2,
private element: ElementRef
) {
}
ngOnInit(): void {
if ('ontouchstart' in document.documentElement) {
this.renderer.listen(this.element.nativeElement, 'touchstart', this.onTouchStart.bind(this));
this.renderer.listen(this.element.nativeElement, 'touchend', this.onTouchEnd.bind(this));
}
}
private onTouchStart(e: TouchEvent): void {
if (e.touches.length === 1) {
this.start = e.touches[0].pageX;
this.stillMoving = true;
this.moveListener = this.renderer.listen(this.element.nativeElement, 'touchmove', this.onTouchMove.bind(this));
}
}
private onTouchMove(e: TouchEvent): void {
if (this.stillMoving) {
const x = e.touches[0].pageX;
const difference = this.start - x;
if (Math.abs(difference) >= this.swipeThreshold) {
this.cancelTouch();
if (difference > 0) {
if (this.carousel.activeSlide < this.carousel.slides.length - 1) {
this.carousel.activeSlide = this.carousel.activeSlide + 1;
}
} else {
if (this.carousel.activeSlide > 0) {
this.carousel.activeSlide = this.carousel.activeSlide - 1;
}
}
}
}
}
private onTouchEnd(e: TouchEvent): void {
this.cancelTouch();
}
private cancelTouch() {
if (this.moveListener) {
this.moveListener();
this.moveListener = undefined;
}
this.start = null;
this.stillMoving = false;
}
}
i have used above and it works fine. thanks!
Ionic2 uses swiper for their slider: http://idangero.us/swiper/#.V71Xs5N95UR So, I believe it make sense to use it for carousel, so all the cool features as swiping and animation with hardware acceleration are supported from the box