Ionic 4 | Multiple Slides on Single View 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 4 version.

Let’s get started…

Step 1) Create a new Ionic 4 project.

Make sure you have latest NodeJS and Ionic CLI installed

Create a new application by running following command in CMD

Step 2) Implement Ionic Slides in Application.

In home.page.html, we will add Slides using <ion-slides>  directive

<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:

Step 3) Update Home Component with Object and Methods

In home.page.ts, we have configurations and items object for three Sliders, but having a single event listener for SlideNext, SlidePrevious and Check Disabled Navigation. Complete home.page.ts will look as below:

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

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 following CSS in home.page.scss.

After making above changes to project you can run using this command $ ionic serve --open . Application output will look like this

SwipeJS from which Ionic Slides component is used is having a number of options and configurations you can check here.

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

Ionic 4 | Custom Pagination in Ionic Slider in 1 Step

 

Leave a Reply

avatar
  Subscribe  
Notify of