Ionic 4 Custom Pagination in Ionic Slider in 1 Step

This article is in continuation of my first post on Ionic Sliders. You can check my previous post on How to Create Multiple Slides on Single View. Ionic 4 Slider provides a default DOTS pagination style, here I will Quickly show how to add Custom Pagination in Two Following Ways 1. Fractional Pagination. Change configuration…

By.

min read

This article is in continuation of my first post on Ionic Sliders. You can check my previous post on How to Create Multiple Slides on Single View. Ionic 4 Slider provides a default DOTS pagination style, here I will Quickly show how to add Custom Pagination in Two Following Ways

1. Fractional Pagination.

Change configuration to following in home.page.ts file

  //Configuration for each Slider
  slideOptsOne = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay:true,
    pagination: {
      el: '.swiper-pagination',
      type: 'fraction',
    }
  };

 

2. Pagination with Numbers.

  //Configuration for each Slider
  slideOptsOne = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay:true,pagination: {
      el: '.swiper-pagination',
      clickable: true,
      renderBullet: function (index, className) {
        return '<span class="' + className + '">' + (index + 1) + '</span>';
      },
    }
  };

 

Check the previous post for the complete tutorial.

One response to “Ionic 4 Custom Pagination in Ionic Slider in 1 Step”

  1. ali Avatar

    hi greate job, would you plz add more slider design thanks

Leave a Reply

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