Ionic slide box with backward and forward functionality

Hi,

In this article we are going to discuss creating an application that makes use of slide boxes.  The theme of the application will be cars.

Run the following command in your terminal-

ionic start IonicProject blank

cd IonicProject

ionic platform add android

ionic platform add ios

Add the following lines of code in your style.css file-

.slider { height: 100%; text-align: center }

.scroll { height: 100% }

We add the above code because we want each slide in the slide box to take up the full screen.  Any text in these slides will be centered.

Add the following lines of code in your index.html file-

<ion-slide-box>

    <ion-slide>

        <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/7/79/2001_BMW_Z3_Sideview_Topdown_Topaz_Blue_2.5i.jpg">

    </ion-slide>

    <ion-slide>

        <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/2/2e/BMW_Z3_1.9L_1998.jpg">

    </ion-slide>

    <ion-slide>

        <img style="width: 100%" src="http://www.bmwblog.com/wp-content/uploads/bmw-z3-black.jpg">

    </ion-slide>

</ion-slide-box>

You’ll notice that I’ve found three random car pictures on the internet and included them in each of the slides.  The image will take up the full width of the slide.

The above code is very basic.  It only allows for swiping.  It doesn’t auto play and it doesn’t loop.  It also doesn’t allow you to choose the current slide.  By adding the following line in index.html file, we can have better control of our slide box:

<ion-slide-box ng-controller="slideController" pager-click="navSlide(index)" auto-play="true" does-continue="true">

The above code will auto play the slides and loop them.  I’ve also added a function that allows you to choose the slide when you click on one of the pager items.  The function is found inside the slideController which can be seen below:

example.controller("slideController", function($scope, $ionicSlideBoxDelegate) {

    $scope.navSlide = function(index) {

        $ionicSlideBoxDelegate.slide(index, 500);

    }

});

Now if you want to add the next and previous slide functionality by clicking on next and previous arrow, then add following lines of code in your slideController-

 $scope.slidePrevious = function() {

        $ionicSlideBoxDelegate.previous();
    }

    $scope.slideNext = function() {

        $ionicSlideBoxDelegate.next();
    }

And now index.html file look like-

<ion-slide-box ng-controller="slideController" pager-click="navSlide(index)">

 <ion-slide>


<h4>

       <b>Slide1</b> <i class="ion-chevron-right" ng-click = "slideNext()"></i>

 </h4>


        <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/7/79/2001_BMW_Z3_Sideview_Topdown_Topaz_Blue_2.5i.jpg">

    </ion-slide>

    <ion-slide>


<h4>

     <i class="ion-chevron-left" ng-click="slidePrevious()"></i>    <b>Slide2</b> <i class="ion-chevron-right" ng-click = "slideNext()"></i>

 </h4>


        <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/2/2e/BMW_Z3_1.9L_1998.jpg">

    </ion-slide>

    <ion-slide>


<h4>

     <i class="ion-chevron-left" ng-click="slidePrevious()"></i>    <b>Slide3</b> 

 </h4>


        <img style="width: 100%" src="http://www.bmwblog.com/wp-content/uploads/bmw-z3-black.jpg">

    </ion-slide>

</ion-slide-box>

 


 

Thanks...