How to Create Autoplay Slides using Ionic 2

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 these slides in the mobile app and run in an Android and iOS device.

Table of Contents:

• Create Ionic 2 App
• Add Slides to Ionic 2 View
• Create Dynamic Slides from Array
• Run Ionic Slides App on iOS and Android Devices

Before the starting this tutorial, make sure you already install all required tools like Node.js, latest Ionic 2 and latest Cordova. As usual, we'll begin tutorial from scratch that means, to begin with creating a new app.

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 a 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 a default browser and show the app in iOS or Android mode.

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 an image slide show.

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

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.

Run Ionic Slides App 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, the 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 changes 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.

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ionic 4 - Full Starter App and save development and design time. Android, iOS, and PWA, 100+ Screens and Components, the most complete and advance Ionic Template.

That just the basic. If you need more deep learning about Ionic, Angular, and Typescript, you can take the following cheap course:

• IONIC 4 Design Hybrid Mobile Applications IOS & Android
• Wordpress Rest API and Ionic 4 (Angular) App With Auth
• Mobile App from Development to Deployment - IONIC 4
• Ionic 4 Crash Course with Heartstone API & Angular
• Ionic 4 Mega Course: Build 10 Real World Apps

Thanks.