A Photo Carousel using AngularJS and AngularJS Material

 

I worked on a carousel for my personal page. I am using HTML5, CSS, AngularJS and AngularJS Material.

You can see it working here.

I used this code as a baseline and translated it to the technologies listed above.

HTML

<div class="slideshow-container" layout="row" layout-align="center center">
<div>
<div class="prev" ng-click="moveSlides(-1)">❮</div>
<div ng-repeat="slide in slides">
 <img ng-src="{{slide.image}}" ng-class="{visible: (slide.visible === true), invisible: (slide.visible === false)}" style="width:100%"></div>
<div class="next" ng-click="moveSlides(1)">❯</div>
</div>
</div>
<div class="dotsContainer" layout="row" layout-align="center center">
<div layout="row" layout-align="center center" ng-repeat="slide in slides">
 <span class="dot" ng-click="currentSlide($index)" ng-class="{active: (slide.visible === true), inactive: (slide.visible === false)}"></span></div>
</div>

CSS

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.visible {
  /* fading animation: */
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
  display: block;
}

.invisible {
  display: none;
}

/* previous and next buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  z-index: 1000;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.prev:focus {
    outline: none;
    border: 0;
}

.next:focus {
    outline: none;
    border: 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* The dots/bullets/indicators */
.dotsContainer {
  width: 100%;
}

.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.inactive {
  background-color: #bbb;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

JS

myApp.controller('ArtController', ['$scope', '$interval', function($scope,  $interval) {

  // automatic slide change time
  SLIDECHANGE_TIME = 4000;
  SLIDE_MOVE = 1;

  // array of images
  $scope.slides = [
    {
      image: 'views/images/ShopPhoto1.jpg',
      visible: true
    },
    {
      image: 'views/images/ShopPhoto2.jpg',
      visible: false
    },
    {
      image: 'views/images/ShopPhoto3.jpg',
      visible: false
    },
    {
      image: 'views/images/ShopPhoto4.jpg',
      visible: false
    },
    {
      image: 'views/images/ShopPhoto5.jpg',
      visible: false
    }
  ];

  // slice index
  var slideIndex = 0;

  // changes slide based on clicked dot at the bottom
  $scope.currentSlide = function(clickedSliceIndex) {
    $scope.slides[slideIndex].visible = false;
    $scope.slides[clickedSliceIndex].visible = true;
    slideIndex = clickedSliceIndex;
  }

  // moves slides back or forth depending on parameter n (+1, -1)
  $scope.moveSlides = function(n) {
    $scope.slides[slideIndex].visible = false;
    if ((slideIndex + n) >= $scope.slides.length) {
      slideIndex = 0;
    } else if ((slideIndex + n) <= 0) {
      slideIndex = $scope.slides.length - 1;
    } else {
      slideIndex += n;
    }
    $scope.slides[slideIndex].visible = true;
  }

  // automatic slide change every 4 seconds
  var change = $interval(function(){
      $scope.moveSlides(SLIDE_MOVE);
  }, SLIDECHANGE_TIME);