How to Create Autoplay Slides using Ionic 2

by Didin J. on Mar 14, 2017 How to Create Autoplay Slides using Ionic 2

Step by step tutorial of how to create autoplay Slides using Ionic 2 final release.

This tutorial describes how to create built in Ionic 2 autoplay Slides from scratch. Slides are components that bundling on Ionic 2, you can find more detail here. We will show you how to implement this slides in mobile app and run in Android and iOS device. Before the starting this tutorial, make sure you already install all required tools like Node.js, latest Ionic 2 and latest Cordova. As usually, we'll begin tutorial from scratch that means, to begin with creating a new app.


1. Create Ionic 2 App

Before creating new Ionic 2 app, open terminal or cmd then go to your projects folder. Type this command to create new Ionic 2 app.

ionic start Ionic2Slides --v2

Go to the newly created Ionic 2 app folder.

cd Ionic2Slides

Before continue to the next steps, make sure this Ionic 2 app working fine by typing this command.

ionic serve --lab

It will automatically open default browser and show the app in iOS or Android mode.

How to Create Autoplay Slides using Ionic 2 - Ionic 2 Welcome page


2. Add Slides to Ionic 2 View

Now, it's a time for adding slides in Ionic 2 view. Open and edit src/pages/home/home.html using your favorite text editor or IDE then add this tags inside "<ion-content>" and remove padding attribute on it.

<ion-content>
  <ion-slides autoplay="5000" loop="true" speed="3000">
    <ion-slide >
      <img src="../../assets/images/slide-1.jpg">
    </ion-slide>
    <ion-slide >
      <img src="../../assets/images/slide-2.jpg">
    </ion-slide>
    <ion-slide >
      <img src="../../assets/images/slide-3.jpg">
    </ion-slide>
  </ion-slides>
</ion-content>

That "<ion-slides>" tag is used with attribute autoplay, loop, and speed. The content of each slide just a static image which put in "assets/images" folder, so prepare your image for slides before seeing the app in the browser. Let's take a look again your browser, it should be shown image slide show.

How to create autoplay slides using Ionic 2 - autoplay slides

That it's the basic Ionic 2 Slides that play automatically and loops every 5000ms. Next, we will continue with dynamic Ionic 2 Slides.

 


3. Create Dynamic Slides from Array

To make dynamic Slides, open and edit src/pages/home/home.ts then declare an array after Class name.

slideData = [{ image: "../../assets/images/slide-1.jpg" },{ image: "../../assets/images/slide-2.jpg" },{ image: "../../assets/images/slide-2.jpg" }]

Edit src/pages/home/home.html then change "ion-slide" to be one slide with Angular 2 loop.

<ion-content>
  <ion-slides autoplay="5000" loop="true" speed="3000">
    <ion-slide *ngFor="let slide of slideData">
      <img src="{{slide.image}}" />
    </ion-slide>
  </ion-slides>
</ion-content>

That code changes will display the same result as previous static Ionic 2 Slides.


4. Run Slide on iOS and Android Devices

This time to run this Ionic 2 Slides app on the real iOS and Android devices. Before starting the run in real devices, make sure you have added the platform for each device.

ionic platform add android

By default, iOS platform was installed when creating new Ionic 2 App. Uninstall and install again iOS platform.

ionic platform rm ios
ionic platform add ios

Then run the app in the device.

ionic platform run ios

Oh no! there's no images in our slide. Don't panic, just change the path to the slide images in the controller. Edit home.ts the change image path in slide array.

slideData = [{ image: "assets/images/slide-1.jpg" },{ image: "assets/images/slide-2.jpg" },{ image: "assets/images/slide-2.jpg" }]

Now, the Ionic 2 Slides will play automatically and smoothly on both iOS and Android device.

You can find the source code for this tutorial on our Github.

Thanks.

The following resources might be useful for you:

Loading…