Last few months I noticed a lot of people requesting a carousel example. Let’s create one, something sweet and sexy.
 
First of all, we will not use nothing jQuery related, God knows there’s a ton of them. No, no, we’re going to do it vanilla Angular style.
 
 

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!
 

Table of Contents

 
Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)

Tutorials

Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin Tutorials

 

Introduction

Don’t worry, we’re not going to this from the scratch. Even better, I found an AngularJS based carousel made compatible with Ionic Framework. It’s called angular-swiper and it’s made on the top of the idangero.us Swiper plugin.
 
Angular-Swiper GitHub Swiper GitHub Documentation
 
 

Installation

Create a new project:
 
ionic start IonicCarouselDemo blank
cd IonicCarouselDemo
 
Warning: Since some of you never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.
 
Before we can proceed make sure you have the bower in your system.
 
npm install -g bower
 
Update it if you already have a preexisting installation:
 
npm update -g bower
 
Some of bower plugins require a git installation. Unfortunately, I don’t know if this plugin is one of them; my environment has everything preconfigured. Make sure you have git if you receive a git related error during this next installation:
 
bower install angular-swiper
 
Plugin and all of its dependencies can be found inside a www/lib folder.
 
If you’re using Cordova 4+ and especially if you’re accessing remote images don’t forget to install Cordova Whitelist plugin:
 
cordova plugin add cordova-plugin-whitelist
 
And add this security meta tag to your index.html file:
 
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
 

Preparation

Plugin instructions are a little bit misleading, they talk about a classic AngularJS preparations, we’ll do it a little bit different.
 
Because Ionic already wraps AngualarJS we will not need another instance.
 
Open your index.html and include only these files:
 
    <link href="lib/swiper/dist/css/swiper.min.css" rel="stylesheet"/>	
    <script src="lib/swiper/dist/js/swiper.js"></script>
    <script src="lib/angular-swiper/dist/angular-swiper.js"></script>	
 
Make sure these new JavaScript files are initialized after ionic.bundle.js file
 
Now inject ksSwiper as a dependency for your app:
 
var app = angular.module('starter', ['ionic','ksSwiper']);
 
Finally a last step. Prepare your images and add this directive to your HTML file, we’re going to do this in index.html file:
 
<ks-swiper-container initial-slide="3" speed="2000" loop="true" show-nav-buttons="false" slides-per-view="3" space-between="5" pagination-clickable="false" override-parameters="{effect: 'coverflow',coverflow: {rotate: 50,stretch: 0,depth: 100,modifier: 1,slideShadows : false}}">
	<ks-swiper-slide class="swiper-slide" ng-repeat="s in [1,2,3,4,5,6,7,8]">
		<img ng-src="img/puppy-{{s}}.jpg" width="100%">
	</ks-swiper-slide>			
</ks-swiper-container>
 
This is one of the examples I’m using in this tutorial. Link at the beginning of this article holds all configuration parameters; read them carefully.
 
I almost forgot. The official documentation forgot to mention one important thing. When used with Ionic, images must have a width set to 100%. Don’t do this through configuration, carousel will stop working.
 
You can also use many available slide events:
 
app.controller('CarouselController', function($scope) {
    $scope.swiper = {};

    $scope.onReadySwiper = function (swiper) {

		swiper.on('slideChangeStart', function () {
			console.log('slide start');
		});
		
		swiper.on('onSlideChangeEnd', function () {
			console.log('slide end');
		});		
    };
});
 
Continue to the next page