Ion Slide - Arrows navigation

[conde2]

URL https://ionicframework.com/docs/api/slides

What is missing or inaccurate about the content on this page?

I'm struggling to get the arrow navigation working on Ionic, I tried adding some swipper elements to it but no success, and there is nothing about this in the docs page. It is really trick specially if you have to make it work with a lot of slides in a ngFor.

  slideOpts = {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  };

      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

Would help a lot if there was any documentation about this.

[mbunge]

Please also have a look at right docs of current swiper implementation. Ionic slides uses swiper 5.4.1.

Swiper 5x Docs: https://github.com/nolimits4web/swiper/blob/Swiper5/API.md

[conde2]

I did, but would be very useful to see an example working with Ionic elements, I tried using the example in this documentations, but no success.

The problem is that ion-slides will only work with ion-slide inside, so if I put the arrow divs it does not work properly.

[mbunge]

Here is an example how we add navigation arrows to slide left and right and hide left on reaching start, and right on reaching end. They hide automatically.

We listen on every change if end or start has been reached with ionSlideWillChange. Furthermore we start tracking changes for displaying navigation, when slider has been initialized with ionSlidesDidLoad.

We reference the slider and access available methods with #mySlider ViewChild reference.

Angular HTML

    <div *ngIf="(isBeginning$ | async) === false" class="news-slider__prev" (click)="prevSlide()">
      <ion-icon name="chevron-back"></ion-icon>
    </div>
    <div *ngIf="(isEnd$ | async) === false" class="news-slider__next" (click)="nextSlide()">
      <ion-icon name="chevron-forward"></ion-icon>
    </div>
  <ion-slides [pager]="pager" class="slider top-news-slider" [options]="slideOptions" (ionSlideWillChange)="updateSliderIconState()" (ionSlidesDidLoad)="updateSliderIconState()" #mySlider>
    Slidercontent
  </ion-slides>

Angular Component

@Component({
  selector: 'app-specific-slider',
  templateUrl: './specific-slider.component.html',
  styleUrls: ['./specific-slider.component.scss'],
})
export class SpecificSliderComponent implements OnInit {

  @Input() width: number;
  @Input() slidesPerView = 1;
  @Input() slideWidth: number = 0;
  @Input() slidesOffsetBefore: number = 0;
  @Input() sliderClassName: string = '';
  @Input() pager: boolean = true;

  @ViewChild('mySlider', { static: true }) slider: IonSlides;
  isBeginning$: Observable<boolean>;
  isEnd$: Observable<boolean>;

  slideOptions: { [key: string]: any } = {};

  constructor() {
  }

  ngOnInit() {
    this.slideOptions = {
      slidesPerView: this.slidesPerView,
      initialSlide: 0,
      slidesOffsetBefore: this.slidesOffsetBefore,
      preloadImages: true,
      // updateOnImagesReady: true,
      cssMode: true,
      width: this.slideWidth * this.slidesPerView
    };
  }

  trackItemsById(index, item) {
    return item.id;
  }

  nextSlide() {
    if (this.slider) {
      this.slider.slideNext();
    }
  }

  prevSlide() {
    if (this.slider) {
      this.slider.slidePrev();
    }
  }

  updateSliderIconState() {
    this.isEnd$ = from(this.slider.isEnd());
    this.isBeginning$ = from(this.slider.isBeginning());
  }
}

[conde2]

Thank you very much, another problem that I faced was using relative positioning on CSS, would you mind to share your css class for the arrow buttons?

[averyjohnston]

Thank you for the issue. In the time since this was posted, ion-slides has been deprecated. You can find further information, including a migration guide to Swiper.js, on the component docs page: https://ionicframework.com/docs/api/slides I'm going to go ahead and close this out.