आयनिक 2 स्लाइड घटक - स्प्रिपर एपीआई

Question

ऐप स्वागत पृष्ठ/स्लाइड पर आयन-स्लाइड घटक (4 स्लाइड) का उपयोग कैसे करें। मुझे अंतिम स्लाइड पर जाने के लिए उपयोगकर्ता की क्षमता की आवश्यकता है। डॉक्स Swiper API के आयन-स्लाइड्स कार्यान्वयन कहते हैं। मुझे विधियों तक पहुंचने की आवश्यकता है: mySwiper.slideTo(index, speed, runCallbacks);

कार्यान्वित करने के तरीके पर युक्तियाँ?

Answer 1

में इसका इस्तेमाल आप विकल्पों संपत्ति के भीतर एक समारोह पारित कर सकते हैं कर सकते हैं।

Original answer।

@Component({ 
    selector: 'my-component', 
    template: '<ion-slides [options]="options"> 
       <ion-slide>Slide1</ion-slide> 
       <ion-slide>Slide2</ion-slide> 
      </ion-slides>', 
    directive: [IONIC_DIRECTIVES] 
}) 
export class MyComponent { 
    public slider: any; 

    constructor() { 
    this.options = { 
     onlyExternal: false, 
     onInit: (slides: any) => 
     this.slider = slides 
    } 
    } 

    click() { 
    this.slider.sliderNext(true, 250); 
    } 
} 

अधिक विकल्पों के लिए swiper api पर एक नज़र डालें।

Answer 2

आप अपने Swiper

@Injectable() 
export class HomeSwiper { 
    swiper = null; 

    initSwiper(selector) { 
    this.swiper = new Swiper(selector, { 
     pagination: '.home-swiper-pagination', 
     speed: 400, 
     spaceBetween: 100, 
     nextButton: '.swiper-button-next', 
     prevButton: '.swiper-button-prev' 
    }); 
    } 

    goTo(index) { 
    this.swiper.slideTo(index); 
    } 
} 

के साथ एक सेवा कर और अपने @Page

@Page({ 
    templateUrl: 'build/pages/home/home.html', 
    providers: [HomeSwiper] 
}) 
export class Home { 
    constructor(private swiperService: HomeSwiper) { 
    this.swiperService.initSwiper('.home-modal-swiper-container'); 
    } 

    skipSlides() { 
    this.swiperService.goTo(indexOfTheLastSlide); 
    } 
} 

Answer 3

आप देख रहे हैं कस्टम निर्देशों के बिना एक सरल उपाय के लिए, तुम कोशिश कर सकते इस

constructor(
    private _app: IonicApp 
){} 
    ngAfterViewInit() { 
    this._slider = this._app.getComponent('my-slider'); 
    } 
    goToSlide(slideIndex){ 
    this.slider.slider.slideTo(slideIndex); 
    }