Implementing Slide Box in Ionic Mobile App

This is an easy way to add a slide box into your Ionic mobile app by using ion-slide-box directive.

Let’s create a new project by running the following command on your terminal:

We call our project as ‘molooloslider‘ with ‘blank‘ template starter. If you want, you can choose another options: sidemenu or tabs (default).

Folders Structure for our slide box
Folders Structure

Now, your hybrid mobile app ready to go.  You should be seeing your project folders/files structure something like above screenshot.

Next, navigate to your project folder and run the ionic serve command:

Blank Starter Template
Blank Starter Template

You will see something like my screenshot above on your browser.

Before proceeding to the next step, we need to provide two or more images to be displayed on the slide box. Put all the pictures in the www/img folder. In my case, I have 3 images: slider-01.jpg, slider-02.jpg and slider-03.jpg.

Next, we start to implementing our slide box.

Open www/js/app.js file, then add $rootScope variable as parameter of your .run() method (@line 8):

The $rootScope parameter will keep our images name as an array.

Below of line 22, add the following code to assign the images to $rootScope.images variable.

Next step, open www/index.html file, insert ion-slide-box directive between the ion-content tag.

The auto-lay=”true” at ion-slide-box tag makes our slide box will be running automatically each time the page was loaded. Please refer to here for another attributes.

Since, we store the images in $rootScope.images as array, we will simplify and make our HTML code more dynamic by using ng-repeat directive:

Open your browser, Ta…da… Our small project has been completed.

ion slide image - ion image slide

On the next tutorial, we will improve our slide box to take the pictures from the server dynamically with ajax method.


Recent Posts

Recent Comments




    Written by:

    Be First to Comment

    Leave a Reply