Ionic 5|4 Multiple Slides on Single View with Custom Navigation Using Swiper Slider

Ionic Framework provides a very powerful and fully loaded Slider which can be modified in any form. Ionic Slider is basically SwiperJS slider, it provides a number of ways a slider/ carousel can be built in a view. You can check it’s  demo page, we can have similar Slider/ Carousel in the Ionic app using Slider Component.

In this post, we will implement Three Image Carousel using Slides in Ionic 5 version.

Let’s get started…

#1 Update Ionic CLI

We are going to build an Ionic application in using the latest version of the @ionic/cli package which is 6.6.0. You can update by running below npm command in the terminal

$ npm install -g @ionic/cli

 

#2 Create a new Ionic 5 application.

After updating the Ionic CLI, execute below ionic command to create a new Ionic application using Angular framework by adding the --type=angular option with a blank template.

$ ionic start ionic-swiper-slider-tutorial blank --type=angular

move to the application folder

$ cd ionic-swiper-slider-tutorial

#3 Adding Ionic Slides in Home Page

The ionic framework provides the ion-slides UI component which acts as a wrapper for each slide created by adding ion-slide component. The ion-slides component is basically using the Swiper carousel library, which is very popular and provides a number of configuration options. Ofcourceyou can apply those configurations in Ionic application as well.

In our blank template-based application, open the home.page.html, then add Slides using <ion-slides>  component

<ion-slides [options]="slideOptsOne" #slideWithNav  (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
   <ion-slide *ngFor="let s of sliderOne.slidesItems">
       <img src="../../assets/images/{{s.id}}.jpg">
    </ion-slide>
</ion-slides>

<ion-slides>: Wrapper directive for slider

<ion-slide>: Having each slide, here we have dynamic slides iterating over an object of items.

[options]: Is taking configuration for this slider.

(ionSlideDidChange): Event listener called when a slide is changed.

 

In the application we have used three Sliders with complete HTML is given below:

<!-- home.page.html -->
<ion-header [translucent]="true">
  <ion-toolbar color="warning">
    <ion-title>
      Multiple Ion-Sliders with Custom Navigation
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">



  <h5>Auto Play Slider</h5>

  <ion-grid>
    <ion-row>
      <ion-col size="12">

        <ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
          (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
          <ion-slide *ngFor="let s of sliderOne.slidesItems">
            <img src="https://i.picsum.photos/id/{{s.id}}/300/200.jpg">
            <span class="slide-text">Slide id {{s.id}}</span>
          </ion-slide>
        </ion-slides>

      </ion-col>

    </ion-row>
  </ion-grid>


  <h5>Slider with Space Between</h5>

  <ion-grid>
    <ion-row>
      <ion-col size="1">
        <span class="slider-nav arrow-prev" (click)="slidePrev(sliderTwo,slideWithNav2)">
          <div class="prev-icon-custom custon-nav" [class.disabled]="sliderTwo.isBeginningSlide"></div>
        </span>
      </ion-col>
      <ion-col size="10">

        <ion-slides pager="false" [options]="slideOptsTwo" #slideWithNav2
          (ionSlideDidChange)="SlideDidChange(sliderTwo,slideWithNav2)">
          <ion-slide *ngFor="let s of sliderTwo.slidesItems">
            <img src="https://i.picsum.photos/id/{{s.id}}/300/200.jpg">
          </ion-slide>
        </ion-slides>

      </ion-col>
      <ion-col size="1">
        <span class="slider-nav arrow-next" (click)="slideNext(sliderTwo,slideWithNav2)">
          <div class="next-icon-custom custon-nav" [class.disabled]="sliderTwo.isEndSlide"></div>
        </span>
      </ion-col>
    </ion-row>
  </ion-grid>

  <h5>Slider at bottom</h5>

  <ion-grid>
    <ion-row>
      <ion-col size="1">
        <span class="slider-nav arrow-prev" (click)="slidePrev(sliderThree,slideWithNav3)">
          <div class="prev-icon-custom custon-nav" [class.disabled]="sliderThree.isBeginningSlide"></div>
        </span>
      </ion-col>
      <ion-col size="10">

        <ion-slides pager="false" [options]="slideOptsThree" #slideWithNav3
          (ionSlideDidChange)="SlideDidChange(sliderThree,slideWithNav3)">
          <ion-slide *ngFor="let s of sliderThree.slidesItems">
            <img src="https://i.picsum.photos/id/{{s.id}}/300/200.jpg">
          </ion-slide>
        </ion-slides>

      </ion-col>
      <ion-col size="1">
        <span class="slider-nav arrow-next" (click)="slideNext(sliderThree,slideWithNav3)">
          <div class="next-icon-custom custon-nav" [class.disabled]="sliderThree.isEndSlide"></div>
        </span>
      </ion-col>
    </ion-row>
  </ion-grid>


</ion-content>

Note: For an Autoplay set option autoplay:true

#4 Update Home Component with Object and Methods

Now In the home.page.ts file, we'll add configurations and items object for three Sliders, but having a single event listener for SlideNext, SlidePrevious to check the navigation arrow state

First Slider is having AutoPlay set to true in the configuration object sliderOneYou can check more configurations here.

// home.page.ts
import { Component, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';

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

  @ViewChild('slideWithNav', { static: false }) slideWithNav: IonSlides;
  @ViewChild('slideWithNav2', { static: false }) slideWithNav2: IonSlides;
  @ViewChild('slideWithNav3', { static: false }) slideWithNav3: IonSlides;

  sliderOne: any;
  sliderTwo: any;
  sliderThree: any;


  //Configuration for each Slider
  slideOptsOne = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay: true
  };
  slideOptsTwo = {
    initialSlide: 1,
    slidesPerView: 2,
    loop: true,
    centeredSlides: true,
    spaceBetween: 20
  };
  slideOptsThree = {
    initialSlide: 0,
    slidesPerView: 3
  };

  constructor(
  ) {
    //Item object for Nature
    this.sliderOne =
    {
      isBeginningSlide: true,
      isEndSlide: false,
      slidesItems: [
        {
          id: 995
        },
        {
          id: 925
        },
        {
          id: 940
        },
        {
          id: 943
        },
        {
          id: 944
        }
      ]
    };
    //Item object for Food
    this.sliderTwo =
    {
      isBeginningSlide: true,
      isEndSlide: false,
      slidesItems: [
        {
          id: 324
        },
        {
          id: 321
        },
        {
          id: 435
        },
        {
          id: 524
        },
        {
          id: 235
        }
      ]
    };
    //Item object for Fashion
    this.sliderThree =
    {
      isBeginningSlide: true,
      isEndSlide: false,
      slidesItems: [
        {
          id: 643
        },
        {
          id: 532
        },
        {
          id: 232
        },
        {
          id: 874
        },
        {
          id: 193
        }
      ]
    };
  }

  //Move to Next slide
  slideNext(object, slideView) {
    slideView.slideNext(500).then(() => {
      this.checkIfNavDisabled(object, slideView);
    });
  }

  //Move to previous slide
  slidePrev(object, slideView) {
    slideView.slidePrev(500).then(() => {
      this.checkIfNavDisabled(object, slideView);
    });;
  }

  //Method called when slide is changed by drag or navigation
  SlideDidChange(object, slideView) {
    this.checkIfNavDisabled(object, slideView);
  }

  //Call methods to check if slide is first or last to enable disbale navigation  
  checkIfNavDisabled(object, slideView) {
    this.checkisBeginning(object, slideView);
    this.checkisEnd(object, slideView);
  }

  checkisBeginning(object, slideView) {
    slideView.isBeginning().then((istrue) => {
      object.isBeginningSlide = istrue;
    });
  }
  checkisEnd(object, slideView) {
    slideView.isEnd().then((istrue) => {
      object.isEndSlide = istrue;
    });
  }

}

Step 4) Add CSS Style for Custom Navigation and Images in the assets folder

As we are using custom Navigation Arrows for Next, Previous buttons, we will add the following CSS in the home.page.scss.

// Slider Style START 
.custon-nav{
  height: 48px;
  width: 20px;
  cursor: pointer;

  vertical-align: middle;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.prev-icon-custom{
  background: url(https://freakyjolly.com/demo/jquery/OwlCarousel2/nav-icon.png) no-repeat scroll 0px 0px;
}
.prev-icon-custom.disabled{
  opacity: 0.4;
  cursor: default;
}
.next-icon-custom{
  background: url(https://freakyjolly.com/demo/jquery/OwlCarousel2/nav-icon.png) no-repeat scroll -32px 0px;
}
.next-icon-custom.disabled{
  opacity: 0.4;
  cursor: default;
}
.slider-nav{
  ion-icon{
      height: 100%;
  }
}

.slide-text{
  position: absolute;
  color: white;
  bottom: 30px;
}

// Slider Style STOP

 

That's it you have an awesome Swiper based slider in your Ionic application. After making the above changes to the project you can run using this command $ ionic serve --open . Application output will look like this.

Check the source code in GitHub repository here.

 

Also, Check Angular – Implement Ultimate! Swiper Image Slider/ Carousel in 3 Steps

Ionic 4 | Custom Pagination in Ionic Slider in 1 Step

Conclusion: Ionic sliders are very powerful and featured carousel as backed by popular Swiper library. You can apply any configuration options in the slider which are available in Swiper documentations. In the next posts, we will discuss how to add slide effects like Fade, Slide and Cube which make Swiper a choice of everyone.

Keep in touch thanks!

Leave a Reply

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