Infinite loop

[dottodot]

Would it be possible to make the loop option infinite so when it get to the last slide it continues to the first with scrolling back to opposite direction.

[sheikalthaf]

@dottodot currently not possible but in near future will try to update.

[pablomaurer]

This is how i made my infinite slider, but the problem is the animation when going from last to first slide or first to last slide.

But good work, thanks for sharing. This is the only slider/swiper/carousel I could find that works with data binding in angular.

import { Component } from '@angular/core';
import { CustomerService } from "../../app/services/data/wrapper/customer-wrapper.service";
import 'hammerjs';

@IonicPage()
@Component({
  selector: 'page-customer-slide',
  templateUrl: 'customer-slide.html',
})
export class CustomerPageSlide {

  // swiper data
  itemIndex: number = 0;
  customers: any[] = [
    { name: 'laaa', no: 1, city: 'yaaa' }, { name: 'l', no: 2, city: 'yooo' }, { name: 'laa', no: 3, city: 'yiii' },
    { name: 'daaa', no: 4, city: 'daaa' }, { name: 'do', no: 5, city: 'dooo' }, { name: 'di', no: 6, city: 'diii' }
  ];

  slides: any[] = [null, null, null];
  slideCurrent: number = 0;
  slidePrevious: number = 0;

  // swiper
  carouselTile = {
    grid: { xs: 1, sm: 1, md: 1, lg: 1, all: 0 },
    slide: 1,
    speed: 400,
    animation: 'lazy',
    point: {
      visible: false
    },
    load: 2,
    touch: true,
    easing: 'ease',
    loop: true
  }

  constructor() {
  }

  ngOnInit() {
    this.slides[0] = this.customers[0];
    this.slides[1] = this.customers[1];
    this.slides[2] = this.customers[2];
  }

  public carouselTileLoad(event) {

    // update slider index
    this.slideCurrent = event;
    let previous_index = this.slideCurrent === 0 ? 2 : this.slideCurrent - 1;
    let next_index = this.slideCurrent === 2 ? 0 : this.slideCurrent + 1;

    // update item index
    if (previous_index == this.slidePrevious) {
      console.log('slide up');
      this.itemIndex = this.findNextIndex(this.itemIndex);
    }
    if (next_index == this.slidePrevious) {
      console.log('slide down');
      this.itemIndex = this.findPreviousIndex(this.itemIndex);
    }

    // update slider with items
    this.slides[previous_index] = this.customers[this.findPreviousIndex(this.itemIndex)];
    this.slides[this.slideCurrent] = this.customers[this.itemIndex];
    this.slides[next_index] = this.customers[this.findNextIndex(this.itemIndex)];

    // keep slidePrevious to determine if we slided up or down
    this.slidePrevious = this.slideCurrent;
  }

  private findNextIndex(index) {
    return this.itemIndex + 1 === this.customers.length ? 0 : this.itemIndex + 1;
  }

  private findPreviousIndex(index) {
    return this.itemIndex - 1 === -1 ? this.customers.length - 1 : this.itemIndex - 1;
  }
}

[hemanthsp]

can you give code how to make it in infinite loop ???????????? please

[pablomaurer]

@hemanthsp I gave code write above your comment. But you can't use infinite loop currently due to animation-problems using this component.

[hemanthsp]

ha, finally i moved owl lib because of infinite loop

[romanzadorov]

Waiting for this feature. Would be very helpful.

[hauzlife]

any updates about it?

[girlwhodrawsandstuff]

Would appreciate this feature any time soon