angular-cycle-gallery

Responsive, angularjs touch gallery without shit

Homepage

Angular Core Dependency: ~1.2.26

Module License: MIT

Added by: Sam Deering

GitHub

Repository

rademade/angular-cycle-gallery

Stats

Stars: 26

Watchers: 26

Forks: 5

Author

Rademade
Rademade

Module Description

Angular-cycle-gallery

AngularJS responsive gallery with loop items listing. Support:

  • Next / Prev buttons
  • Animation for next and previous items
  • Touch scrolling support. Amazing!

Live demo -> Try it now

How to use?

Template example

  div.gallery-wrapper(gallery-config-buffer="2")
      div.gallery-slider
          div.gallery-item(gallery-repeater="item in gallery")
              div.gallery-item-content() {{item.text}}

      button.action-button.next(gallery-button="next") next
      button.action-button.prev(gallery-button="prev") prev
      button.action-button.next.animate(gallery-button="animateNext") Animate next
      button.action-button.prev.animate(gallery-button="animatePrev") Animate prev

Controller example

app = angular.module('app', ['multiGallery'])

app.controller 'AppController', ['$scope', ($scope) ->

  $scope.gallery = [
    {text: 'Item 1'}
    {text: 'Item 2'}
    {text: 'Item 3'}
    {text: 'Item 4'}
    {text: 'Item 5'}
  ]
  
  $scope.forceUpdate = ->
    $scope.setGalleryIndex(2)

  $scope.$watch '$galleryIndex', (index)->
    console.log('Gallery item index changed', index)

]

Styles

Copy style to your project or use build of bower components

Module stats last updated: 2017-02-12 16:00:05

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!