Angular Image Carousel With Thumbnails

This AngularJS code allows you to create a stunning image carousel with thumbnail navigation. With this carousel, you can showcase a collection of photos and provide an interactive browsing experience for your users. The code utilizes the AngularJS framework and includes features like previous and next image navigation, keyboard support for easy navigation, and the ability to click on thumbnails to display a specific image.

Simply provide the image URLs and descriptions in the provided format, and you’re ready to create an engaging image carousel on your website. Try out this code snippet to enhance your web pages with a visually appealing image carousel!

How to Create Angular Image Carousel With Thumbnails

First of all, load the Materialize CSS and Material Icons by adding the following CDN links into the head tag of your web/app project:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

After that, create the HTML for image carousel as follows:

<div ng-app="richCarousel">
  <div ng-controller="MainCtrl">

    <!-- slider container -->
    <div class="container slider">

      <img ng-repeat="photo in photos | filter:myFilter track by $index | filter:query" class="slide materialboxed" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{photo.src}}" />

      <!-- prev / next controls -->
      <a class="arrow prev" href="#next" ng-click="showPrev()"><i class="material-icons">keyboard_arrow_left</i></a>
      <a class="arrow next" href="#prev" ng-click="showNext()"><i class="material-icons">navigate_next</i></a>

      <!-- Thumbnails -->
      <ul class="nav">
        <li ng-repeat="photo in photos | filter:myFilter track by $index" ng-class="{'active':isActive($index)}">
          <img src="{{photo.src}}" alt="{{photo.desc}}" title="{{photo.desc}}" ng-click="showPhoto($index);" />
        </li>
      </ul>
    </div>
  </div>
</div>

Style the image carousel using the following CSS styles:

.arrow, .arrow.prev, .arrow.next {
   cursor: pointer;
   display: block;
   height: 64px;
   outline: medium none;
   position: absolute;
   top: 50%;
   width: 64px;
   z-index: 5;
}

.arrow.prev {
   left: 20px;
}

.arrow.next {
   right: -20px;
}

.material-icons {
   font-size: 50px !important;
}

.arrow.prev:hover,
.arrow.next:hover {
   opacity: 1;
}

.nav {
   bottom: 0;
   display: block;
   height: 80px;
   left: 0;
   margin: 0 auto;
   padding: 1em 0 0.8em;
   position: absolute;
   right: 0;
   text-align: center;
   width: 100%;
   z-index: 5;
}

.nav li {
   border: 1px solid #bbb;
   cursor: pointer;
   display: inline-block;
   height: 40px;
   margin: 0 8px;
   position: relative;
   width: 60px;
}

.nav li.active {
   border: 2px solid blue;
}

.nav li img {
   width: 100%;
}

.slider {
   border: 15px solid #FFFFFF;
   border-radius: 5px;
   height: 500px;
   margin: 20px auto;
   position: relative;
   width: 650px !important;
   perspective: 1000px;
}

.slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
}

.slide.ng-hide-add,
.slide.ng-hide-remove {
   opacity: 1;
}

.slide.ng-hide-add.ng-hide-add-active {
   opacity: 0;
}

.slide, .slide.ng-hide-remove.ng-hide-remove-active {
   opacity: 1;
}

Now, load the AngularJs and Materialize JS by adding the following CDN links before closing the body tag:

<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>

Finally, add the following JavaScript function to your project. To customize the carousel with your own images, simply modify the photos array in the code. Each element of the array represents an image and consists of two properties: src for the image URL and desc for the image description. You can replace the existing URLs with your own image URLs and update the descriptions accordingly.

'use strict';

angular.module('richCarousel', [])
  .controller('MainCtrl', ['$scope', '$document', function($scope, $document) {
    // Set of Photos
    $scope.photos = [
      { src: 'https://source.unsplash.com/800x500?girl', desc: 'Image 01' },
      { src: 'https://source.unsplash.com/800x500?rose', desc: 'Image 02' },
      { src: 'https://source.unsplash.com/800x500?evening', desc: 'Image 03' },
      { src: 'https://source.unsplash.com/800x500?garden', desc: 'Image 04' },
      { src: 'https://source.unsplash.com/800x500?sunset', desc: 'Image 05' },
      { src: 'https://source.unsplash.com/800x500?sunrise', desc: 'Image 06' },
      { src: 'https://source.unsplash.com/800x500?natural', desc: 'Image 07' },
      { src: 'https://source.unsplash.com/800x500?forest', desc: 'Image 8' }
    ];

    // initial image index
    $scope._Index = 0;

    // if a current image is the same as the requested image
    $scope.isActive = function(index) {
      return $scope._Index === index;
    };

    // show prev image
    $scope.showPrev = function() {
      $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1;
    };

    // show next image
    $scope.showNext = function() {
      $scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0;
    };
    // show a certain image on thumbnail click
    $scope.showPhoto = function(index) {
      $scope._Index = index;
    };
    // Keyboard navigation support
    $document.on('keydown', function(event) {
      $scope.$apply(function() {
        switch (event.keyCode) {
          case 37: // Left arrow key
            $scope.showPrev();
            break;
          case 39: // Right arrow key
            $scope.showNext();
            break;
          default:
            return; // Exit function if other keys are pressed
        }
      });
    });
  }]);

That’s all! hopefully, you have successfully created Angular Image Carousel With Thumbnails. If you have any questions or suggestions, feel free to comment below.