How to create intro slider for you Ionic 2 app

Intro slider is very popular feature for mobile applications. You can provide the app basics to your users just in a few slides. Let’s create this amazing component and learn how to choose your initial component at the runtime.

First of all, create new ionic app and install some packages:

We’re installing the Ionic Storage to save and retrieve the information about intro status. I mean was it completed or not, and show it again or not. According to this information we’ll be able to choose the initial component.

Now it’s time to create the IntroSlider component itself. Create the src/intro_slider folder and put three following files there:

Of course you can modify HTML template as you need – add/remove slides, modify slides content, etc.

Now you need to add this new component to the AppModule and add Storage to providers array. This allow you to use this new component and Ionic Storage:

If you’ll try to see your app now, it’ll show IntroSlider by default on each app start. We need to avoid this. This means we need to try read 'showIntroSlider' from Ionic Storage. If we’ll find the value and it’ll be equals to 0 – we’ll show Tabs, otherwise we’ll show the IntroSlider. But we have a small problem here – user will see the Tabs for a small amount of time, so we have to somehow hide them. I think it’s good idea to create new Loading component which will read Ionic Storage and activate the proper component (please don’t forget to modify your app.module.ts to include this component):

That’s it! The only thing left to do is to properly configure our AppComponent:

Download the source code for this tutorial: Download

2 thoughts on “How to create intro slider for you Ionic 2 app”

  1. When I try this I’m getting a runtime error. cannot find module ionic-native.

    All  I did was downloaded the files from your source code and replaced them in newly created ionic 2 tabs project.

Leave a Reply

Your email address will not be published. Required fields are marked *