Angular Cycle Gallery Example

https://github.com/Rademade/angular-cycle-gallery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<div ng-app="demoApp" ng-controller="MainController as mainCtrl">

  <div class="gallery-wrapper" cycle-gallery="" config-animation-time="1000">
    <div class="gallery-slider" cycle-gallery-holder="">
     <div class="gallery-item" gallery-repeater="item in mainCtrl.galleryItems" style="background-color: {{item.color}}">
        {{item.content}}
      </div>
    </div> 
    
    <button gallery-button="animatePrev"> Prev slide</button>
    <button gallery-button="animateNext"> Next slide</button>

  </div>

</div>

CSS

/* Styles example */
.gallery-wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.gallery-slider {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  white-space: nowrap;
 }


.gallery-item {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 150px;
  background-position: top center;
  -webkit-background-size: cover;
  background-size: cover;
}

JavaScript

function MainController() {
  this.galleryItems = [
      {content: 'First', color: '#B3ECFF'},
      {content: 'Second', color: '#BA415B'}
  ];
}

angular.module('demoApp', ['cycleGallery']).controller('MainController', MainController);

// Loaded JS library – https://github.com/Rademade/angular-cycle-gallery/blob/master/build/angular-cycle-gallery.min.js

(function(){angular.module("cycleGallery",[])}).call(this),function(){angular.module("cycleGallery").directive("galleryButton",["Finder",function(t){return{restrict:"A",scope:{galleryButton:"@"},link:function(e,n){var i,r;return i=e.galleryButton,r=t.loadGalleryObject(n).events,n.on("click",function(){switch(i){case"next":return r["do"]("move:next");case"prev":return r["do"]("move:prev");case"animateNext":return r["do"]("animate:next");case"animatePrev":return r["do"]("animate:prev")}})}}}])}.call(this),function(){angular.module("cycleGallery").directive("cycleGallery",["GalleryRenderer","ItemsStorage","MoverHolder","GalleryMover","MoverTouch","GalleryEvents","Resize","ResizeEmulator",function(t,e,n,i,r,o,s,u){return{restrict:"A",scope:{galleryInit:"&galleryInit",galleryIndex:"=galleryIndex",configBuffer:"=configBuffer",configAnimationTime:"=configAnimationTime"},compile:function(a,c){return{pre:function(a,c){var h,l,d,p,_,f,m,y,g,I;return h=angular.element(document).find("body"),l={render:{bufferCount:a.configBuffer||2},mover:{animationTime:a.configAnimationTime||300}},g=new e(l.render),m=new t(a),p=new n,f=new i(l.mover,g,m,p),I=new r(f,p),y=new s(f,p),d=new o,g.setIndex(a.galleryIndex||0),c[0].cycleGallery={renderer:m,storage:g,holder:p,mover:f,touch:I,resize:y,events:d},window.resizeEmulator||(window.resizeEmulator=new u),window.resizeEmulator.bind(y["do"],c),d.on("move:next",function(){return f.next()}),d.on("move:prev",function(){return f.prev()}),d.on("animate:next",function(){return f.animateNext()}),d.on("animate:prev",function(){return f.animatePrev()}),h.on("touchend",function(t){return...