Using Slide Boxes and Tabs in Ionic Framework Apps

One of my Twitter followers recently asked me to do a tutorial on the topic of Ionic Framework slide boxes and tabs.  I’m always up for a challenge, so I decided to attempt to meet his requests.

In this article we are going to discuss creating an application that makes use of tabs, slide boxes, and cards.  The theme of the application will be cars, where two tabs will represent the interior and exterior photos of cars and the third tab will contain information.

Like with my other tutorials, let’s start by creating a fresh Ionic Android and iOS project:

Remember, if you’re not using a Mac then you cannot add and build for the iOS platform.

In this tutorial, we are going to be very heavy HTML dependent rather than JavaScript dependent.  We need to start by adding a few styles.  Either open www/css/style.css or place the following in your www/index.html file:

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.

As per the official Ionic Framework documentation, the following will create a slide box with three slides:

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.  If you’re using images in your production application, you’ll probably want to use better sized images.

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, we can have better control of our slide box:

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 ExampleController which can be seen below:

Let’s make things interesting.  We are going to create three tabs.  Two of the tabs will contain slide boxes while the other will contain random information.  Since we are keeping the car trend, one tab will have exterior pictures, one tab will have interior pictures, and the information slide will have information about where to buy.

Ionic Slide Box Exterior Ionic Slide Box Interior Ionic Tab Information

Before I jump into our goal, let me first show you how we’re going to work with tabs.

More documentation on Ionic tabs can be seen in the official Ionic Framework documentation.  We will be putting each of our tabs content in the <ion-content> tags.  Then when your user clicks on a tab, that particular content will show.

The full JavaScript that goes with the above UI can be seen below:

To follow good practices, you shouldn’t include all your tabs in the index.html file.  You should create template files and make use of the ui-router that ships with Ionic Framework.  This will keep your code extremely organized and better for debugging.  You can see how this is done in one of my previous posts.

A video version of this article can be seen below.

Nic Raboy

Nic is a skilled application developer who has released several native and hybrid mobile applications to iTunes and Google Play. He writes about his development experiences related to making web and mobile app development easier to understand and has experience in Android, Node.js, Apache Cordova, Java, NoSQL, SQL, GoLang, NativeScript, and Unity3D.

  • Jon

    By chance do you have the repo on github?

    • Hi Jon,

      I typically don’t put the examples on GitHub because my goal is to make the written and video articles good enough to not need to.

      Was there some confusion somewhere?

      Regards,

      • Jon

        oh no I was being lazy. ty!

        • The lazy approach often works, but when learning something new, even if it is simple, it is often a good idea to go through the steps 🙂

  • ismaail

    Thanks for the tutorial.

    Do you know a way to show part of the next slide ?
    example: http://postimg.org/image/r0fo07715/

    • You’d have to do a lot of CSS editing and unfortunately, my CSS skills lack. You might ask this question in the official Ionic Framework forums.

      • ismaail

        Thanks, I tried to create a working example,
        see the result http://plnkr.co/edit/5tYKfS?p=preview

        • Wow dude. I am impressed. You did a great job!

          • ismaail

            Thanks.

          • Anton Otto

            This works fine in Plunker, but if you copy and paste the same code into Codepen.io it doesn’t return the same results. Check my codepen here:

            http://codepen.io/AntonOtto/pen/wBeLdd

          • ismaail

            In Codepen.io try to:
            a) change “slide-wrapper” height to use px instead of %
            or
            b) set “html” and “body” elements height to “100%”

          • Rodrigo Rubio

            I second that! awesome! Thanks Ismaail!

  • Bear Wu

    Hi, I have a question on this topic, can you please help me out ? Thanks

    • What is the question?

      • Bear Wu

        I have just figured it out myself! Thank you so much :)!

  • Zülfü Çakmak

    Hey Nic, can we use tabs in contents?

    • What do you mean tabs in contents? Can you please give me some examples?

      • Zülfü Çakmak

        I have 4 tabs. Inside first tab I want to add new tabs. I will not on footer or header. I want to use on middle.

  • angelolev
  • Akshay

    Hi Nic…can u please have a tutorial on the following two topics :
    1) Creating a navigation drawer in ionic just like the one in native android material design
    2) Using UIRouter that is shipped with the ionic framework. I mean a full fledged example (starting from scratch) on using UIRouter to navigate throughout the app like using tabs or swipe views etc

    Many Thanks in advance…..your tutorials are awesome….. 🙂

    • Please request tutorials through Twitter, not in the comments section. Keeping requests out of the comments keeps the comments on point to the article.

      Regards,

      • Akshay

        Sure Nic….will keep that in mind hence forth

  • Daniel Long

    why not full screen, like ios do.
    aspect fill mode

    • I don’t know what you’re referring to. Can you give me an example or more details?

      Regards,

  • Declan Murphy

    Sorry if this is going slightly off topic, but I have several existing controllers for other pages that perform different database functions. I want to use the same slide boxes on every page, but I don’t want to duplicate the code in each controller. Is there a way to do this? Or an angularJS topic to look over? Thanks

    • You might consider making a Factory or Service to handle database calls. This way you can use them throughout multiple controllers without replicating code.

      Regards,

  • David Zhu

    Thanks for putting this together! One thing I’ve been struggling with is having the tabs change as the slider changes. I noticed in your video that sliding does not change tab status. Is there a way to connect these two actions together?

    Also, I am try to bind one controller to each slide screen. However, changing the slide does not change to a different controller. (My controller is actually in another module bound through the UI-router.) I also put together a StackOverflow question on this issue: http://stackoverflow.com/questions/31212018/how-do-i-use-ionics-slide-box-to-change-the-route-and-controller

    • I’m not sure if you can connect the slide status to the tab status. Even if you could, that seems like it would defeat the purpose of even using a slide box. If you just want swipe gestures to change tabs, I’m pretty sure you can do something else for that.

      Regards,

      • David Zhu

        I guess I’m not clear what the purpose of a slide box is then. It is great for sliding through images, and on other native apps, sliding through tabs is a fairly standard interaction. Do you still work using Ionic, and have you ever found alternatives to that usage?

        Since my post I’ve actually discovered that controllers can still be bound to the views without going through the UI router. I’m thinking that I can manually change the route as well as the tab highlighting without re-entering the app through that route. I haven’t tested this yet because of other priorities, but if anyone else stumble upon this, it might help!

        Either way, thanks for the response. I’ve followed your tutorial and made some serious progress.

        • Swipe-able tabs and slide boxes are two very different things. I believe Ionic has a gesture feature for tabs to switch them, but I’ve never personally used it. Slide boxes are more like event carousels.

          You might ask in the forums regarding swiping to change tabs.

          Regards,

  • fabio pereira

    In Browser wrok but don’t work in adroid device why ?

  • R.O.

    Thanks for the great tutorial.
    I have a page with ion-view, inside is ion-content. Then i
    am trying to place slide-box with two slides inside ion-content. Then
    placing 3 tabs side-by-side to make a single bar underneath the
    slide-box.
    But, whenever i place the tabs the slides inside the slide-box are out of view.
    Please, kindly help.

    • Please upload a picture, because I really have no idea what you’re talking about.

      Regards,

  • Digital IQ

    I am pulling some images and trying to display within an . The codes are as follows:

    The corresponding code in controller is :

    function cacheImages () {
    $ImageCacheFactory.Cache ($scope.pageData.images.image)
    .then(function () {
    //console.log (“Images done loading!”);
    $scope.SlideImages = $scope.pageData.images.image;
    $scope.showSlide = true;
    $scope.showLoader = false;
    //
    $ionicSlideBoxDelegate.update();
    $ionicScrollDelegate.resize();
    });

    The slide box shows correctly on most Android devices.

    Problem:

    The Slide box is not at all rendering on iOS and while debugging on
    Safari with X-Code – the slide box does not show up. The images after
    loading – pushes the content below but not the images.

    ** I used ‘https://gist.github.com/IgorMinar/863acd413e3925bf282c’ for building iOS version of the app.

    Please help me to solve this issue.

    Thanks in advance.

    • What do your logs say?

      • Digital IQ

        The Images loaded perfectly (console.log (“Images done loading!”);) .. and on the Safari the images show on the elements console .. but not rendered on the HTML .. that is driving me fool

        • You’re building apps, not websites. My best advice to you would be to stop testing in a web browser.

          I bet there are device / simulator logs. How are you checking for them?

          Regards,

  • Rodrigo Fonseca

    if someone wants to use a slide with tabs, i made this one: https://github.com/rodrigo-fonseca/slide-tabs-ionic/blob/master/README.md

  • Venkatachalapathi G

    Hi Nic,
    is it possible to create slidebox feel for tabs. I mean with tabs example which should work as smooth as slide box when we go from one tab to other tab.

    • Possible, yes, easy, probably not. You’d have to monitor swiping and change the tabs as appropriate.

  • sufiyab khan

    how to move the slide up or down rather then left and right

    • You’ll have to add your own custom JavaScript and CSS. Ionic to my knowledge only supports horizontal sliding out of the box.

      Best,

      • sufiyan khan

        🙁 thanks for the reply

  • isicom

    Thanks a lot…
    I asked in the forum for that: https://forum.ionicframework.com/t/change-root-view-controller-from-slide-view-in-a-tab-based-view-by-button-click/43862
    nobody could explain it me…do you have an idea?

  • Martin Kinitzki

    Unfortunately, as soon as I add

  • Hi Nic. Explain please how to hide pagination in slider for one slide.. I need pagination but I don’t want to see one dot when I have only one slide in my slider. thanks.