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…
https://www.freakyjolly.com/ionic-slides-using-swiper-js-tutorial-by-examples/
#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=angularmove 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
<strong>autoplay:true</strong>
#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 sliderOne. You 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;
});
}
}
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.
Please Check Updated Post Below: This Will Be Deprecated in V6
https://www.freakyjolly.com/ionic-slides-using-swiper-js-tutorial-by-examples/
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!
Thank you so much!!! It works perfectly 😀
Thanks for the great article on ionic sliders