Background Slideshow with AngularJS and Bootstrap

As part of a project we wanted to have the front page with a nice rotating background for the jumbotron. There are a number of carousel components and scripts that can be easily found online but mostly they use the img tag and/or require a root absolute div which means it won’t automatically resize to the jumbotron content. I wanted a jumbotron that would resize to the content and also provide a nice seamless transition for the images. So, I sat down and rolled my own.

Firstly you need to set up a jumbotron component:

And then the HTML:

Create the angular template to generate the image divs:

And finally the Angular component:

Note: If you want to be able to programatically change the interval you’ll need to add a watch that recreates the interval when the interval attribute changes.

2 thoughts on “Background Slideshow with AngularJS and Bootstrap”

  1. I am stuck trying to get the images to appear on the screen. My question is:
    Does the list of images come from –> ng-bg-slideshow=”[ ?

    So when you reference the images in the ng-repeat –> ng-repeat=”img in images” each img is coming from the above list provided to “ng-bg-slideshow”?

    Or are you initializing the list in a controller which is not shown in the provided code?

Leave a Reply

Your email address will not be published. Required fields are marked *