Ionic Example: ion-slide-box

This post is more than 2 years old.

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:

slideBox

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.

iOS Simulator Screen Shot Sep 16, 2015, 10.42.15 AM

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

iOS Simulator Screen Shot Sep 16, 2015, 10.44.18 AM

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

iOS Simulator Screen Shot Sep 16, 2015, 10.52.39 AM

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

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Joshua posted on 9/18/2015 at 2:38 AM

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.

Comment 2 (In reply to #1) by Raymond Camden posted on 9/18/2015 at 10:52 AM

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.

Comment 3 by montjoile posted on 11/10/2015 at 2:50 PM

how can you dissable the slide list bar?

Comment 4 (In reply to #3) by Raymond Camden posted on 11/10/2015 at 7:21 PM

Do you mean the dots at the bottom?

Comment 5 (In reply to #4) by montjoile posted on 11/10/2015 at 7:30 PM

yes, but I already find the solution by putting: show-pager="false" in the html >>
<ion-slide-box show-pager="false">

Comment 6 by Ali posted on 4/21/2016 at 9:02 AM

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!

Comment 7 (In reply to #6) by Raymond Camden posted on 4/21/2016 at 12:17 PM

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.

Comment 8 (In reply to #7) by Ali posted on 4/21/2016 at 3:02 PM

Ok so in lieu of anything better that's what i will try and do .

Really appreciate the prompt response Ray - thanks again!

Comment 9 by Piyu posted on 5/3/2016 at 10:56 AM

Great post, Thank you!

Comment 10 by Grace posted on 5/28/2016 at 1:47 AM

Hi Raymond is there a way to show numbers like so 1/10 instead of the circles for page slider?

Comment 11 (In reply to #10) by Raymond Camden posted on 5/28/2016 at 1:23 PM

You can disable the built in pager and then use your own logic. Know that this control is deprecated now.

Comment 12 by Eric posted on 7/20/2016 at 3:43 AM

I am having problem each time I use more than six (6) slide tab. The page often get a white space below the content.

Comment 13 (In reply to #12) by Raymond Camden posted on 7/20/2016 at 12:56 PM

I'd suggest creating a reproduceable case (use CodePen) and then file a bug report.

Comment 14 by Mohamad Al Asmar posted on 8/6/2016 at 4:48 PM

Thank you, you saved my day !

Comment 15 (In reply to #14) by Raymond Camden posted on 8/6/2016 at 5:29 PM

You are most welcome.

Comment 16 by karthick posted on 9/19/2016 at 11:59 AM

how to slide automatic

Comment 17 (In reply to #16) by Raymond Camden posted on 9/19/2016 at 6:11 PM

The API supports forcing a slide - so you could do it that way - at an interval.

Comment 18 by andreas heiner posted on 10/21/2016 at 9:21 AM

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

Comment 19 (In reply to #18) by Raymond Camden posted on 10/21/2016 at 7:17 PM

I don't know - I'll have to make some time to redo it. :)

Comment 20 (In reply to #18) by Raymond Camden posted on 10/24/2016 at 7:51 PM
Comment 21 by Raulin Falcone posted on 2/16/2017 at 7:40 AM

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

Comment 22 (In reply to #21) by Raymond Camden posted on 2/16/2017 at 12:30 PM

No idea. Did you try it as is?

Comment 23 (In reply to #22) by Raulin Falcone posted on 2/16/2017 at 2:08 PM

Hi Raymond,

I've already tried and it works. Thanks!

Comment 24 by Dmitry Krychylskyy posted on 4/25/2017 at 8:18 AM

Hello Raymon,
super tutorial, thank you,
but i haw a question - how i can get images from device for slider?
Thanks

Comment 25 (In reply to #24) by Raymond Camden posted on 4/25/2017 at 11:23 AM

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.

Comment 26 by A.Sha posted on 6/30/2017 at 12:40 AM

image preview links are broken :(
Do you plan to update this article for ionic v 3 ?

Comment 27 (In reply to #26) by Raymond Camden posted on 6/30/2017 at 1:21 PM

Not really. I've got a crap ton of Ionic 1 blog posts, I can't update them all. :)

Comment 28 by Rijwan Mohmmed posted on 11/24/2018 at 4:18 PM

How can we add book view slider in angular 2 . Please Help me i am in big problem.

Comment 29 (In reply to #28) by Raymond Camden posted on 11/24/2018 at 4:59 PM

I'm no longer using Ionic and this post is over three years old now. I'd consider StackOverflow or the Ionic forums.