Adding the carousel

Now, let’s see how to add a carousel using angular-bootstrap. I’m sure most of you would have added carousels in your project. Most probably, these would have been one of those numerous jQuery plugins, and I’m sure that some of you must have struggled to make it work the first time.

Angular Bootstrap has its own custom directive for carousel and it’s extremely easy to add a carousel to your home page using it.

As the home page is rendered using the MainCtrl controller and the views/main.html partial, we will be adding our carousel code to these files.

In the past, one of the biggest drawbacks of creating HTMLized click flows has been the intermingling of design and data. Most designers would create regular HTML pages with static markups linked with each other. The problem with this is, besides a lot of repetitive code, when these click flows are taken up to create the actual app, there is a fair amount of rework that would need to be done.

Now, with Angular, it becomes extremely easy to separate your presentation layer from the actual data. Besides making this very efficient to write, it also becomes very easy to take this for actual development, as one now needs to only replace the static data models with the dynamic data; the presentation layers don’t need to be changed at all.

With the idea of keeping the data separate from the markup, let’s first create our data models in the app/scripts/controllers/main.js file.

We will delete the current awesomeThings model and start replacing it with the following code:

var baseURL='http://lorempixel.com/960/450/';
$scope.setInterval=5000;

Now, when you create any kind of website or mockup, there is always a need to use placeholder images or stock images. There is an excellent site called www.lorempixel.com that provides images of the desired dimensions and for a certain category.

It is extremely easy to use lorempixel where you want to display placeholder images. For example, use http://lorempixel.com/960/450/sports, where 960 and 450 are the width and height, respectively, of the desired image, and the category is sports. Visit www.lorempixel.com to see the list of category keywords they support.

As we are going to be using images from here, we’ll define a variable named baseURL with the URL string passing the width and height parameters that we want for the image.

Next, we create another variable called setInterval with a value of 5000. This will be used to set the autoslider of the carousel to 5 seconds.

Now, we’ll create our slides model using the following lines of code:

$scope.slides = [
   {
         title:'7 Ways to stay Fit',
         image:baseURL+'sports/',
         text:'Play a sport for 30 minutes a day!'
   },
   {
         title:'Healthly Food',
         image:baseURL+'food/',
         text:'Food that you should be eating!'
   },
   {
         title:'Relaxing Holidays',
         image:baseURL+'nature/',
         text:'10 Locations for Nature Lovers!'
   }

    ];

This is essentially a JavaScript object with three parameters, namely title, image, and text. Note that for the image property, we prefix the term baseURL to the category name for each of the slides. This completes our work on the model.

Now, let’s first open the views/main.html file and add the following markup above the jumbotron element:

<carousel interval="setInterval">
   <slide ng-repeat="slide in slides" active="slide.active">
   </slide>
</carousel>

As you can see, this is a custom directive called <carousel> that has been natively written in angular-bootstrap.

The interval attribute is used to set a delay between each slide change as follows:

interval=setInterval

We then loop though the slides using ng-repeat.

Now, we’ll put in the elements that will display the image, title, and text. Within the <slides> tag, add the following code:

      <img class="carousel-image" ng-src="{{slide.image}}"/>
      <div class="carousel-caption">
            <h2>{{slide.title}}</h2>
            <p>{{slide.text}}</p>
      </div>

Save the files and watch the browser refresh automatically (this happens if you have the server still running).

You should now be able to see the slider working.

You’ll notice that the navigation bar is overlapping the carousel. This is because of the position:absolute property that gets applied when we add the navbar-top-fixed class.

You’ll also notice that on wide-screen monitors, the carousel image doesn’t cover the entire width. This happens because by default, Bootstrap works in the responsive mode and will change the container width to 1170 px while our carousel image is 960 px.

To fix these problems, we’ll add the following CSS classes. In the app/styles/main.css file, delete the present code and add the following lines of code:

body{
  padding-top: 50px;
}

.carousel-image{
  width: 100%;
}