ion-slides

Contents

The Slides component is a multi-section container. Each section can be swiped or dragged between. It contains any number of Slide components.

Adopted from Swiper.js: The most modern mobile touch slider and framework with hardware accelerated transitions.

http://www.idangero.us/swiper/

Copyright 2016, Vladimir Kharlampidi The iDangero.us http://www.idangero.us/

Licensed under MIT

Usage

angular javascript react vue
import { Component } from '@angular/core';

@Component({
  selector: 'slides-example',
  template: `
    <ion-slides pager="true" [options]="slideOpts">
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
    </ion-slides>
  `
})
export class SlideExample {
  slideOpts = {
    effect: 'flip'
  };
  constructor() {}
}
  <ion-slides pager="true">

    <ion-slide>
      <h1>Slide 1</h1>
    </ion-slide>

    <ion-slide>
      <h1>Slide 2</h1>
    </ion-slide>

    <ion-slide>
      <h1>Slide 3</h1>
    </ion-slide>
  </ion-slides>
var slides = document.querySelector('ion-slides');
slides.options = {
  effect: 'flip'
}
import React from 'react';

import { IonSlides, IonSlide } from '@ionic/react';

const slideOpts = {
  effect: 'flip'
};

const Example: React.SFC<{}> = () => (
  <IonSlides pager={true} options={slideOpts}>
    <IonSlide>
      <h1>Slide 1</h1>
    </IonSlide>
    <IonSlide>
      <h1>Slide 2</h1>
    </IonSlide>
    <IonSlide>
      <h1>Slide 3</h1>
    </IonSlide>
  </IonSlides>
);

export default Example;
<template>
  <ion-slides pager="true" :options="slideOpts">
    <ion-slide>
      <h1>Slide 1</h1>
    </ion-slide>
    <ion-slide>
      <h1>Slide 2</h1>
    </ion-slide>
    <ion-slide>
      <h1>Slide 3</h1>
    </ion-slide>
  </ion-slides>
</template>


<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';

  @Component()
  export default class SelectExample extends Vue {
    slideOpts = {
      effect: 'flip'
    };
  }
</script>

Properties

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

options

Description

Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options

Attribute options
Type any
Default {}

pager

Description

If true, show the pagination.

Attribute pager
Type boolean
Default false

scrollbar

Description

If true, show the scrollbar.

Attribute scrollbar
Type boolean
Default false

Events

Name Description
ionSlideDidChange Emitted after the active slide has changed.
ionSlideDoubleTap Emitted when the user double taps on the slide's container.
ionSlideDrag Emitted when the slider is actively being moved.
ionSlideNextEnd Emitted when the next slide has ended.
ionSlideNextStart Emitted when the next slide has started.
ionSlidePrevEnd Emitted when the previous slide has ended.
ionSlidePrevStart Emitted when the previous slide has started.
ionSlideReachEnd Emitted when the slider is at the last slide.
ionSlideReachStart Emitted when the slider is at its initial position.
ionSlidesDidLoad Emitted after Swiper initialization
ionSlideTap Emitted when the user taps/clicks on the slide's container.
ionSlideTouchEnd Emitted when the user releases the touch.
ionSlideTouchStart Emitted when the user first touches the slider.
ionSlideTransitionEnd Emitted when the slide transition has ended.
ionSlideTransitionStart Emitted when the slide transition has started.
ionSlideWillChange Emitted before the active slide has changed.

Methods

getActiveIndex

Description

Get the index of the active slide.

Signature getActiveIndex() => Promise<number>

getPreviousIndex

Description

Get the index of the previous slide.

Signature getPreviousIndex() => Promise<number>

isBeginning

Description

Get whether or not the current slide is the first slide.

Signature isBeginning() => Promise<boolean>

isEnd

Description

Get whether or not the current slide is the last slide.

Signature isEnd() => Promise<boolean>

length

Description

Get the total number of slides.

Signature length() => Promise<number>

lockSwipeToNext

Description

Lock or unlock the ability to slide to the next slides.

Signature lockSwipeToNext(shouldLockSwipeToNext: boolean) => Promise<void>

lockSwipeToPrev

Description

Lock or unlock the ability to slide to the previous slides.

Signature lockSwipeToPrev(shouldLockSwipeToPrev: boolean) => Promise<void>

lockSwipes

Description

Lock or unlock the ability to slide to change slides.

Signature lockSwipes(shouldLockSwipes: boolean) => Promise<void>

slideNext

Description

Transition to the next slide.

Signature slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>

slidePrev

Description

Transition to the previous slide.

Signature slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>

slideTo

Description

Transition to the specified slide.

Signature slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>

startAutoplay

Description

Start auto play.

Signature startAutoplay() => Promise<void>

stopAutoplay

Description

Stop auto play.

Signature stopAutoplay() => Promise<void>

update

Description

Update the underlying slider implementation. Call this if you've added or removed child slides.

Signature update() => Promise<void>

updateAutoHeight

Description

Force swiper to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter

Signature updateAutoHeight(speed?: number | undefined) => Promise<void>

CSS Custom Properties

Name Description
--bullet-background Background of the pagination bullets
--bullet-background-active Background of the active pagination bullet