Ionic with Swiper

With Ionic 1.2, they have official started the support for Swiper with ionic and same time I was looking for the same. In fact this Swiper is by far more feature rich then the default one.

When I tried to find any example on google other then the announcement page, I didn’t find anything, so I thought why can’t I create and post for the other users.

<ion-slides options="galleryOptions" slider="gallerySlider">
    <ion-slide-page ng-repeat="img in images">
        <img ng-src="{{img}}">
    </ion-slide-page>
</ion-slides>

And pass the galleryOptions in the controller as:

$scope.galleryOptions = {
      pagination: '.swiper-pagination',
      slidesPerView: 3,
      freeMode: true,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      paginationClickable: true,

      spaceBetween: 10
    };

Complete example on codepen:


1


See the Pen Ionic with Swiper by Kapil Kumawat (@kk20994) on CodePen

Swiper Options & Documentation

Swiper Demo

2 thoughts on “Ionic with Swiper”

  1. JImena says:

    Thanks!!!!!!!!

  2. Daeng Faroqi says:

    how can i detect current index

Leave a comment