Responsive Image Carousel with Angular.js and Bootstrap 3

Category: Javascript , Slideshow | July 28, 2014
Views Total: 8,498
Official Page: Go to website
Last Update: July 28, 2014
License: MIT


Responsive Image Carousel with Angular.js and Bootstrap 3


A fully responsive image carousel slideshow which allows you to loop through multiple groups of images.


  • Responsive design for both desktop and mobile devices.
  • Dots and arrows navigation.
  • Images can be categorized into multiple groups.
  • Endless loop when you reach the last slide.
  • Auto-rotation with support for pause on hover.


  • Angular
  • jQuery Library
  • Bootstrap 3

How to use it:

Include the Bootstrap’s CSS in the head section of your document.

<link rel="stylesheet" href="">

Include the jQuery library, Bootstrap’s Javascript and Angular.js at the bottom of the document.

<script src="//"></script>
<script src="//"></script>
<script src="//"></script>

Create the Html structure for the image carousel.

<div ng-app="carousel">
  <div class="container" ng-controller="folderCtrl"> 
    <!-- Carousel
        ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" ng-repeat="img in images" class="{active : (img === 0)}" data-slide-to="{{img}}"></li>
      <div class="carousel-inner">
        <div ng-class="{item: true, active : (img === 0)}" ng-repeat="img in images"> <img ng-src="{{uri}}/{{w}}/{{h}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}">
          <div class="container">
            <div class="carousel-caption"> </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div>
    <!-- /.carousel --> 

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-botom" role="navigation">
      <div class="container">
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li ng-repeat="folder in folders" class="{{activeFolder(folder)}}" ng-click="selectFolder(folder)"> <a ng-href="#{{folder}}">{{folder}}</a> </li>
        <!--/.nav-collapse --> 

Active the image carousel and set the image sources  in the Javascript.

var app = angular.module('carousel', []);
app.controller('folderCtrl', function ($scope, $http) {
  $scope.w = window.innerWidth;
  $scope.h = window.innerHeight-20;
  $scope.uri = "";
  $scope.folders = [
  $scope.images = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  $scope.currentFolder = $scope.folders[0];
  $scope.selectFolder = function (folder) {
    $scope.currentFolder = folder;
  $scope.activeFolder = function (folder) {
    return (folder === $scope.currentFolder) ? 'active' : '';

3 thoughts on “Responsive Image Carousel with Angular.js and Bootstrap 3

  1. Soldeplata Saketos Candela

    For newbies (like me) this example is lacking some information as how to organize images and folders

  2. Soldeplata Saketos Candela

    I have a question… what is for the $http in the “app.controller(‘folderCtrl’, function ($scope, $http)”???
    I think it is not used afterwards


Leave a Reply