Creating a horizontal slider in Ionic 4

Creating a horizontal slider in Ionic 4


  • Share on Pinterest

In this blog post I will show how to make a horizontal slider for a magazine/blog style app.

I think the slider ui component are really great for displaying highlighted content in an app. e.g. Featured blog post, most liked, recommend, top stories etc.

The final result will look like this:

First, make sure you are running the latest Node version

Then create a new Ionic 4 project.

$ ionic start myApp blank --type=angular

For this example I will just use the blank template. *Note the –type=angular for ionic 4 project.

$ cd myApp
$ ionic serve

For the horizontal slider feature, we will use the <ion-slides> component.

Navigate to the home.page.html under src/app/home

<!-- home.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>
      Blog Stories
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    
    <ion-slides pager="true">
        <ion-slide>
            <h1>Slide 1</h1>
        </ion-slide>
        
        <ion-slide>
            <h1>Slide 2</h1>
        </ion-slide>
        
        <ion-slide>
            <h1>Slide 3</h1>
        </ion-slide>
    </ion-slides>

</ion-content>

This will get us something like this. Now lets add some content to it.

Normally I will use the HttpClient, to fetch some kind of content from a web api to display.

In this example I will just use some hardcoded data. So I created topStories which contains an array of hashes each with a title:, author:, body: and picture:

In home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  topStories: any;

  constructor(){

    this.topStories = [
      {title: "Exploring San Francisco", author: "Rea Ramsey", body: "", picture: "https://picsum.photos/500/400?image=693"},
      {title: "Coffee the right way", author: "Ellesha Hartley", body: "", picture: "https://picsum.photos/500/400?image=1060"},
      {title: "Best Hiking In Yosemite", author: "Vinnie Alexander", body: "", picture: "https://picsum.photos/500/400?image=1043"},
      {title: "Astro Photography Guide", author: "Greg Rakozy", body: "", picture: "https://picsum.photos/500/400?image=903"}
    ]

  }


}

 

Now it’s just a matter of looping through the array with *ngFor and display the data in the template.

I’m using the <ion-img> component for displaying the images. ion-img only loads images visible in the DOM. This gives you some performance enhancements when loading the app.

<!-- home.page.html -->
<ion-content>
    
    <ion-slides class="slide-padding" pager="false">
        <ion-slide *ngFor="let story of topStories">
            <div class="container">
                <ion-img src="{{story.picture}}"></ion-img>
                <h2 class="slidetitle">
                    <span class="block">{{story.title}}</span>
                </h2>
                <p class="author">By {{story.author}}, 2h ago</p>
            </div>
        </ion-slide>
    </ion-slides>

    <div class="sub-headers">
        <p>Latest News</p>
    </div>

</ion-content>

 

Time for some styling to make things look prettier.

.container{
     position: relative;
     width: 100%;
 }

.slidetitle { 
    position: absolute; 
    bottom: 60px;
    left: 18px;
    color: white;
    text-align: left;
    font-family: 'Libre Baskerville', serif;
 }

 .block{
    background-color:rgba(0, 0, 0, 0.5);
    padding: 4px;
 }

 .author {
    position: absolute; 
    bottom: 25px;
    left: 20px;
    color: rgb(240, 240, 240);
    font-size: 15px !important;
    font-weight: 300;
    text-shadow: 1px 1px 3px #000000;
 }

 .sub-headers{
    padding-left: 20px;
    text-align: center;
    font-weight: bold;
 }

 

  • Hina Malik
    Reply
    Author
    Hina Malik Hina Malik

    Images size are not get equal height. Can you help please?