Select Page

I recently made a video on how to create swipeable tabs in Ionic using the segment and the slider components. In it, I touched a little on how to programmatically manipulate the slider to change when you tap on any of the segment buttons.

Some few days later, I came to a realization that, many Ionic developers don’t know how powerful the slider components with itheir API are. So in this lesson and a couple that follows, I will demonstrate how to use the power Ionic offers through its components and APIs specifically, the Slider.

The Swiper Library

There exists a JavaScript library called Swiper that I think every ionic developer should look at. On their homepage they define what the library is in these words:

Swiper – is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers.
Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity

I will advise you take a look at the library and the demos at http://idangero.us/swiper/. You will then understand how powerful it is.

What does this library have to do with ionic? Well, The Ionic Slider component is actually a wrapper around Swiper library. This means you get all the functionalities offered by the library in Ionic.

Some of the features you get are navigation controls, parallax transitions, transition effects like 3d, virtual slides, flexbox layout and many many more. One other thing I like about the Swiper Library is that, it does not depend on any JavaScript library like jQuery.

Getting Started

Using the slider component in Ionic is easy. Just drop the code below in an ionic page and you get a slider with 3 slides.

<ion-slides>

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

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

  <ion-slide>
    <h2>Slide 3</h2>
  </ion-slide>

</ion-slides>

Next

In the next lesson, I will show you how to start customizing the components and add things like controls, change the transition effects and direction of the slider.