One of my favorite parts of the Ionic framework is the ion-slide-box. It is a simple directive that allows you to create a pretty handy little widget for your mobile application. (Widget isn't really the best word.) The ion-slide-box directive lets you embed a set of images (or random HTML) and then display one item at a time. Their docs have a great little animated gif that I'm going to steal to demonstrate exactly what this looks like:

What makes this feature so cool is how darn easy it is to use. For example, here is the sample code to create a slide box:
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
This is incredibly simple. I thought I'd build a simple demo of this feature that tied the slides to a dynamic result. I thought I'd use the Bing Image Search API since it worked well for me in the past (Adding voice-based search to a PhoneGap app). I set up a simple view that included a form field and button top.

When you enter a term, it will then display the results in a slidebox:

Notice the little gray balls at the bottom - they provide a way for you to know where you are in the slide list (and you can turn that feature off if you want). Now let's take a look at the code. First, I'll show the HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Image Search</h1>
</ion-header-bar>
<ion-content class="padding" ng-controller="MainCtrl">
<div class="list">
<label class="item item-input">
<input type="search" placeholder="Search" ng-model="search">
</label>
<button class="button button-full button-assertive" ng-click="doSearch()">Search</button>
</div>
<ion-slide-box>
<ion-slide ng-repeat="image in images">
<img ng-src="{{image.MediaUrl}}" style="width:300px;height:300px;margin:auto;display:block" >
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-pane>
</body>
</html>
Most of this is boilerplate Ionic code, but you can seem my ion-slide-box is using a dynamic ion-slide list. That's really all there is to it. I could include more in the slide, like the image title, source, etc., but I wanted it simple. Now let's look at the code.
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.controller("MainCtrl", function($scope, ImageSearch, $ionicSlideBoxDelegate) {
$scope.images = [];
$scope.doSearch = function() {
if(!$scope.search) return;
console.log("search for ", $scope.search);
ImageSearch.getImages($scope.search).then(function(results) {
$scope.images = results.data.d.results;
setTimeout(function() {
$ionicSlideBoxDelegate.slide(0);
$ionicSlideBoxDelegate.update();
$scope.$apply();
});
});
};
})
.service("ImageSearch", function($http) {
return {
getImages:function(term) {
var appid = "fgQ7ve/sV/eB3NN/+fDK9ohhRWj1z1us4eIbidcsTBM";
$http.defaults.headers.common['Authorization'] = 'Basic ' + btoa(appid + ':' + appid);
return $http.get("https://api.datamarket.azure.com/Bing/Search/v1/Image?$format=json&Query='"+escape(term)+"'&$top=10");
}
};
})
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
The Bing API changed a bit since my last demo, but for the most part is still relatively easy to use. Their documentation wasn't always very direct. Outside of that I had no real issues. And yes - that's my appid included in the source code. This is a perfect example of where I could use a MobileFirst HTTP Adapter. I described this process here: Working with MP3s, ID3, and PhoneGap/Cordova – Adding IBM MobileFirst. Using the adapter would also let me modify how Bing returns results. I could use lowercase and I could return just the URLs, making my mobile perform better since less network data would be going back and forth.
Outside of the service it is a simple matter of updating the scope - but I ran into an interesting issue. I noticed that if I was on slide X and searched for something else...

then the "current slide" remained at where you were before. That's where $ionicSlideBoxDelegate.slide(0) comes into play. But doing so introduced a weird bug involving AngularJS and digests. I hate those things. Mike Hartington from the Ionic team helped me out on Slack and recommended the timeout/$scope.$apply() solution you see above. That made it work perfectly.
All in all, a simple demo, but I hope this is useful for folks. You can find the complete source code for this demo here: https://github.com/cfjedimaster/Cordova-Examples/tree/master/ionicslidebox1
Archived Comments
Nice post! I like your clean, straightforward example. :)
Kind of curious why you left your appid in there -- typically, you don't want to share auth keys and the like. Someone could steal it.
Also, you can use the `$timeout` service instead of `timeout` and `$apply`:
$timeout(function() {
$ionicSlideBoxDelegate.slide(0);
$ionicSlideBoxDelegate.update();
});
It triggers a digest automatically.
When I was working w/ Mike, he actually showed me $timeout first, then setTimeout, and I preferred setTimeout since it meant one less dependency in my service. Not saying that was the right decision, but that's why I did it. :)
As for the appid, yep, that's an issue. I mention how I'd handle that in the article though.
how can you dissable the slide list bar?
Do you mean the dots at the bottom?
yes, but I already find the solution by putting: show-pager="false" in the html >>
<ion-slide-box show-pager="false">
Hi there.
I've got a standard slide box setup :
<ion-slide-box>
<ion-slide>
< some text and a button with ng-click="go('/a-new-html-page')">
</ion-slide>
<ion-slide>
< some more text and another button with ng-click="go('/another-new-html-page')>
</ion-slide>
</ion-slide-box>
When I use my app, I slide to the second box and click the button to be sent to another-new-html-page. This is an options page with a list of checkbox options.The things I tick here will be shown back in the second slide box on my starting page - so I tick one or more options and click the back button...
.. and that where I get stuck. I have returned to back to the FIRST slide box and you have to slide along to the second box to see those changes. whihc of course is not very user friendly.
Is there a way to return back to the FIRST slide box if i hit back from the "a-new-html-page" and the SECOND slide box if I hit back from the "another-new-html-page"
I'm very new to Ionic and probably making all kinds of "school boy" errors so any help would be greatly appreciated!
Hmm. The only thing I can think of is to remember the current slide (using on-slide-changed), and then on loading the page again, see if you weren't on slide 1 and if so - slide to the index. I don't see a way to *render immediately* with N being selected.
Ok so in lieu of anything better that's what i will try and do .
Really appreciate the prompt response Ray - thanks again!
Great post, Thank you!
Hi Raymond is there a way to show numbers like so 1/10 instead of the circles for page slider?
You can disable the built in pager and then use your own logic. Know that this control is deprecated now.
I am having problem each time I use more than six (6) slide tab. The page often get a white space below the content.
I'd suggest creating a reproduceable case (use CodePen) and then file a bug report.
Thank you, you saved my day !
You are most welcome.
how to slide automatic
The API supports forcing a slide - so you could do it that way - at an interval.
Hi Raymond,
thanks, yet again a great tutorial ...
The above code is for Ionic 1.3.; I'm working with Ionic 2. As I'm far from an experienced coder, how would the code look for Ionic 2?
thanks
Andreas
I don't know - I'll have to make some time to redo it. :)
https://www.raymondcamden.c...
Hi Raymond,
Great tutorial. Since the code is for Ionic 1.3. How can we do the same in Ionic 1.1.0?
Thanks,
Raulin
No idea. Did you try it as is?
Hi Raymond,
I've already tried and it works. Thanks!
Hello Raymon,
super tutorial, thank you,
but i haw a question - how i can get images from device for slider?
Thanks
There's probably a couple of ways. You can use the Camera plugin to let a user select a picture, and then let them do that multiple times. There's also a plugin that lets you select multiple images. You can also look at the File plugin as a way to list files in a directory.
image preview links are broken :(
Do you plan to update this article for ionic v 3 ?
Not really. I've got a crap ton of Ionic 1 blog posts, I can't update them all. :)
How can we add book view slider in angular 2 . Please Help me i am in big problem.
I'm no longer using Ionic and this post is over three years old now. I'd consider StackOverflow or the Ionic forums.