Hi All,

This blog is about ionic framework functionality ion-slide-box. Ionic framework has some beautiful features one of them is ion-slide-box. It is a directive that allows you to create simple and smooth slider in mobile application.ion-slide-box allows you embed images, items or data.

First we start with file setup:

• Create a ionic project

To install ionic and create ionic project visit below link:

Ionic install

• After creating project you will see some files automatically included in index.html i.e(app.js, controller.js).
• Now i have created a demo2.json file which contains data in json format.

Here is the full example:

Index.html

<ion-view> 
    <ion-contentData class="padding"> 
        <tab-slide-box tab="2">
            <ion-slide-box show-pager="true">

                <ion-slide ng-repeat="item in items">
                    <div class="contentData">
                        <p>{{item.quote}}</p>
                    </div>
                </ion-slide>
                
            </ion-slide-box>
        </tab-slide-box>
    </ion-contentData>
</ion-view>

controller.js

angular.module('sliderApp.controllers', [])

.controller('demoSliderCtrl', function($scope, $http, $ionicSlideBoxDelegate){
    $scope.items = [];
    $http.get("demoJson/demo2.json").success(function(response){ 
        $scope.items = response;
        $ionicSlideBoxDelegate.slide(0);
        $ionicSlideBoxDelegate.update();
    });
    
});

In the above controller.js code we injected $scope,$http,$ionicSlideBoxDelegate directive.

We will make an Ajax request using $http to fetch data into $scope.items variable.

$ionicSlideBoxDelegate is a delegate which controlls the ion-slide-box slider.

We have used some methods which directly called $ionicSlideBoxDelegate service.

For more information visit : $ionicSlideBoxDelegate service in ionic module

Style.css

.contentData{padding:100px;}
.contentData p{border:1px solid;text-align: center;padding:10px;}

The little black balls at the bottom provide a way to you that where you are in the slide.

Hope this will help you... :)