angular carousel

wow so cool

by Roger Sanchez

HTML

<div ng-app="ngAppDemo">
  <div ng-controller="carousel">
    <h1>GalerĂ­a</h1>
    <div class="poopies">
      <div class="item" ng-repeat="image in images" ng-class="{left: $index < imageid, right: $index > imageid, centered: $index == imageid}">
      
        <div class="card card-outline-primary" style="width: 20rem;">
           <img ng-src="{{image.source}}" alt="{{image.description}}">
          <div class="card-block">
            <h4 class="card-title"> <input type="text" ng-model="card.title"></h4>
            <p class="card-text"> <input type="text" ng-model="card.subtitle"></p>
          </div>
        </div>
      </div>
    </div>
    <div class="dots"> <span ng-repeat="image in images" ng-class="{selected: $index == imageid}">*</span>

    </div>
    <a href="#" ng-click="imageid = (images.length + imageid - 1) % images.length">previous</a> &nbsp;
    <a href="#" ng-click="imageid = (imageid + 1) % images.length">next</a>

  </div>
</div>

CSS

.poopies {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 50px;
}

.left,
.right,
.centered {
  display: block;
  width: 100%;
  height: 100%;
  background: silver;
  position: absolute;
  top: 0;
  left: 0px;
  transition: left 0.5s;
}

.left {
  left: -200px;
}

.right {
  left: 200px;
}

.dots span {
  color: #ddd;
}

.dots .selected {
  color: #333;
}

JavaScript

var app = angular.module('ngAppDemo', []);

app.controller('carousel', function($scope) {
  $scope.imageid = 0;
  $scope.images = [{
      source: 'https://www.scotiabank.com/ca/common/banners/logo-scotiabank-lrg.png',
      description: 'Slide 1'
    },
    {
      source: 'https://www.scotiabank.com/ca/common/banners/logo-scotiabank-lrg.png',
      description: 'Slide 2'
    },
    {
      source: 'https://www.scotiabank.com/ca/common/banners/logo-scotiabank-lrg.png',
      description: 'Slide 3'
    },
    {
      source: 'https://www.scotiabank.com/ca/common/banners/logo-scotiabank-lrg.png',
      description: 'Slide 4'
    }
  ];
});