Creating Dynamic Ionic Slides with Additional Slides Inserted Before and After

Question

Creating Dynamic Ionic Slides with Additional Slides Inserted Before and After

Hello, I am currently using ngFor to generate a set of 3 slides with the intention of starting in the middle so that I can smoothly slide left or right from the beginning.

When I slide to the right, I can easily detect when the end is reached and add another slide to the looping array.

However, I encounter an issue when trying to add a slide to the beginning. If I try to use methods like array.unshift() or spread to insert an item at the beginning, the view jumps to position 0 and disrupts the sliding experience.

The code snippet below does somewhat work but it causes a slide animation back to index 1.


slide = [0, 1, 2] //example for looping
slideChanged(event) {
    if(this.slides.isBeginning()){
        this.slide = [this.slide[0]-1, ...this.slide];
        this.slides.update();
        this.slides.slideTo(1)
    }
}

<ion-slides [initialSlide]="1" (ionSlideDidChange)="slideChanged($event)">
    <ion-slide *ngFor="let item of slide">
        <h1>Slide {{item}}</h1>
    </ion-slide>
</ion-slides>

I would greatly appreciate any assistance or suggestions on how to solve this issue!

angular typescript ionic-framework ionic2 ionic3

Answer 1

Answer №1

To achieve this functionality, utilize the ionSlideNextEnd and ionSlidePrevEnd events from the Slides component. Refer to this live example for a working demonstration.

Implementation Example

<ion-header>
  <ion-navbar>
    <ion-title>Dynamic Slides Demo</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
    <ion-slides #slider (ionSlideNextEnd)="loadNext()" (ionSlidePrevEnd)="loadPrev()" [initialSlide]="1">
        <ion-slide *ngFor="let n of numbers">
            <h2>Current slide: {{n}}</h2>
        </ion-slide>
    </ion-slides>
</ion-content>

Component Logic

@Component({...})
export class HomePage {
    @ViewChild('slider') private slider: Slides;

    numbers = [0,1,2];
    firstLoad = true;

    constructor() {}

    loadPrev() {
        console.log('Prev');
        let newIndex = this.slider.getActiveIndex();

        newIndex++;
        this.numbers.unshift(this.numbers[0] - 1);
        this.numbers.pop();

        // Temporary solution to maintain functionality which affects animation
        this.slider.slideTo(newIndex, 0, false);

        console.log(`New status: ${this.numbers}`);
    }

    loadNext() {
        if(this.firstLoad) {
          // Prevent initial movement from altering slides
          this.firstLoad = false;
          return;
        }

        console.log('Next');
        let newIndex = this.slider.getActiveIndex();

        newIndex--;
        this.numbers.push(this.numbers[this.numbers.length - 1] + 1);
        this.numbers.shift();

        // Temporary workaround to ensure functionality without animation disruption
        this.slider.slideTo(newIndex, 0, false);

        console.log(`New status: ${this.numbers}`);
    }
}

Answer 2

To achieve this functionality, utilize the ionSlideNextEnd and ionSlidePrevEnd events from the Slides component. Refer to this live example for a working demonstration.

Implementation Example

<ion-header>
  <ion-navbar>
    <ion-title>Dynamic Slides Demo</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
    <ion-slides #slider (ionSlideNextEnd)="loadNext()" (ionSlidePrevEnd)="loadPrev()" [initialSlide]="1">
        <ion-slide *ngFor="let n of numbers">
            <h2>Current slide: {{n}}</h2>
        </ion-slide>
    </ion-slides>
</ion-content>

Component Logic

@Component({...})
export class HomePage {
    @ViewChild('slider') private slider: Slides;

    numbers = [0,1,2];
    firstLoad = true;

    constructor() {}

    loadPrev() {
        console.log('Prev');
        let newIndex = this.slider.getActiveIndex();

        newIndex++;
        this.numbers.unshift(this.numbers[0] - 1);
        this.numbers.pop();

        // Temporary solution to maintain functionality which affects animation
        this.slider.slideTo(newIndex, 0, false);

        console.log(`New status: ${this.numbers}`);
    }

    loadNext() {
        if(this.firstLoad) {
          // Prevent initial movement from altering slides
          this.firstLoad = false;
          return;
        }

        console.log('Next');
        let newIndex = this.slider.getActiveIndex();

        newIndex--;
        this.numbers.push(this.numbers[this.numbers.length - 1] + 1);
        this.numbers.shift();

        // Temporary workaround to ensure functionality without animation disruption
        this.slider.slideTo(newIndex, 0, false);

        console.log(`New status: ${this.numbers}`);
    }
}

Answer 3

Answer №2

Seeking a solution for making this work on Ionic 4? With some minor adjustments to the typescript component, you can get it up and running.

Check out the modified code that functions in IONIC 4:

ionSlideNextEnd(){
  if(this.firstLoad) {
    // Prevent slides from being modified during initial movement
    this.firstLoad = false;
    return;
  }

  console.log('Next');
  this.daySlider.getActiveIndex().then(idx=>{
      let newIndex=idx
      console.log(newIndex)
      newIndex--;
      this.numbers.push(this.numbers[this.numbers.length - 1] + 1);
      this.numbers.shift();

      // Implementation to ensure functionality: interrupts animation
      this.daySlider.slideTo(newIndex, 0, false);

      console.log(`Updated status: ${this.numbers}`);
  });


}

ionSlidePrevEnd(){
console.log('Previous');
this.daySlider.getActiveIndex().then(idx=>{
    let newIndex=idx
    console.log(newIndex)
    newIndex++;
    this.numbers.unshift(this.numbers[0] - 1);
    this.numbers.pop();

    // Implementation to ensure functionality: interrupts animation
    this.daySlider.slideTo(newIndex, 0, false);

    console.log(`Updated status: ${this.numbers}`);
});
}

If you prefer a simpler approach, consider eliminating the getter for Active Index and utilize the following code for Ionic 4:

ionSlideNextEnd(){
    if(this.firstLoad) {
        this.firstLoad = false;
        return;
    }else{
        this.numbers.push(this.numbers[this.numbers.length - 1] + 1);
        this.numbers.shift();

        // Implementation to ensure functionality: interrupts animation
        this.daySlider.slideTo(1,0,false);
        this.monthViewData.selectedTime=new Date(this.monthViewData.selectedTime.setDate(this.monthViewData.selectedTime.getDate()+1));
        this.eventSource = this.tmp_events.filter((item)=>{
            if(item.startTime >= this.monthViewData.selectedTime.setHours(0,0,0,0) && item.endTime < this.monthViewData.selectedTime.getTime()){
                return item;
            }
        });
    }

}

ionSlidePrevEnd(){

    this.numbers.unshift(this.numbers[0] - 1);
    this.numbers.pop();

    this.daySlider.slideTo(1,0,false);
    this.monthViewData.selectedTime=new Date(this.monthViewData.selectedTime.setDate(this.monthViewData.selectedTime.getDate()-1));
    this.eventSource = this.tmp_events.filter((item)=>{
        if(item.startTime >= this.monthViewData.selectedTime.setHours(0,0,0,0) && item.endTime <= this.monthViewData.selectedTime.getTime()){
            return item;
        }
    });
}

Answer 4

Seeking a solution for making this work on Ionic 4? With some minor adjustments to the typescript component, you can get it up and running.

Check out the modified code that functions in IONIC 4:

ionSlideNextEnd(){
  if(this.firstLoad) {
    // Prevent slides from being modified during initial movement
    this.firstLoad = false;
    return;
  }

  console.log('Next');
  this.daySlider.getActiveIndex().then(idx=>{
      let newIndex=idx
      console.log(newIndex)
      newIndex--;
      this.numbers.push(this.numbers[this.numbers.length - 1] + 1);
      this.numbers.shift();

      // Implementation to ensure functionality: interrupts animation
      this.daySlider.slideTo(newIndex, 0, false);

      console.log(`Updated status: ${this.numbers}`);
  });


}

ionSlidePrevEnd(){
console.log('Previous');
this.daySlider.getActiveIndex().then(idx=>{
    let newIndex=idx
    console.log(newIndex)
    newIndex++;
    this.numbers.unshift(this.numbers[0] - 1);
    this.numbers.pop();

    // Implementation to ensure functionality: interrupts animation
    this.daySlider.slideTo(newIndex, 0, false);

    console.log(`Updated status: ${this.numbers}`);
});
}

If you prefer a simpler approach, consider eliminating the getter for Active Index and utilize the following code for Ionic 4:

ionSlideNextEnd(){
    if(this.firstLoad) {
        this.firstLoad = false;
        return;
    }else{
        this.numbers.push(this.numbers[this.numbers.length - 1] + 1);
        this.numbers.shift();

        // Implementation to ensure functionality: interrupts animation
        this.daySlider.slideTo(1,0,false);
        this.monthViewData.selectedTime=new Date(this.monthViewData.selectedTime.setDate(this.monthViewData.selectedTime.getDate()+1));
        this.eventSource = this.tmp_events.filter((item)=>{
            if(item.startTime >= this.monthViewData.selectedTime.setHours(0,0,0,0) && item.endTime < this.monthViewData.selectedTime.getTime()){
                return item;
            }
        });
    }

}

ionSlidePrevEnd(){

    this.numbers.unshift(this.numbers[0] - 1);
    this.numbers.pop();

    this.daySlider.slideTo(1,0,false);
    this.monthViewData.selectedTime=new Date(this.monthViewData.selectedTime.setDate(this.monthViewData.selectedTime.getDate()-1));
    this.eventSource = this.tmp_events.filter((item)=>{
        if(item.startTime >= this.monthViewData.selectedTime.setHours(0,0,0,0) && item.endTime <= this.monthViewData.selectedTime.getTime()){
            return item;
        }
    });
}

Creating Dynamic Ionic Slides with Additional Slides Inserted Before and After

Answer №1

Answer №2

Similar questions

TypeScript purity - "The variable exports is not defined"

Having trouble compiling a Vue.js application with TypeScript project references?

Can a single data type be utilized in a function that has multiple parameters?

Switch between classes when hovering over / exiting ngFor elements

What is the best way to create a linear flow when chaining promises?

Restricted inclusive collection utilizing embedded identifier

Display the content of an md-dialog with a scroll bar

Angular 6 Checkbox Selector - Filtering Made Easy

Troubleshooting Angular 6: Issues with Route Guards not functioning as expected

Can TypeScript and JavaScript be integrated into a single React application?

MUI options - The specified type 'string' cannot be matched with type '"icon" | "iconOnly" | "text" | "outlined" | "contained" | undefined'

Is there a way to use an Angular interceptor to intercept and modify static files like .html files? I would like to change the lang

Expanding the typings for an established component in DefinitelyTyped

Unable to view cross domain cookies within the browser's development tools

What is the best way to pre-fetch data using axios in Vue?

Are there any more efficient methods to retrieve an object from an arrow function in TypeScript?

Ensuring the validation of JSON schemas with dynamically generated keys using Typescript

Initial request in the sequence is a conditional request

Variable type linked to interface content type

Encountering an error when implementing a router object within a TypeScript class in a Node.js environment