Fork me on GitHub

+ everything lory offers

Download Here

Usage:
Install bower component

bower install angular-lory --save

Add angular, lory and angular-lory.

Add a dependency to the "ngLory" module.

angular.module('MyApp', ['ngLory']);

Prerequisited Html structure
Class names can be changed through options

  • 1
  • 2
  • 3
  • 4

Prerequisited CSS styles

/** * (optional) define here the style definitions which should be applied on the slider container * e.g. width including further controls like arrows etc. */ .slider {} .frame { /** * (optional) wrapper width, specifies width of the slider frame. */ width: 880px; position: relative; font-size: 0; line-height: 0; overflow: hidden; white-space: nowrap; } .slides { display: inline-block; } li { position: relative; display: inline-block; /** * (optional) if the content inside the slide element has a defined size. */ width: 880px; }

That's it!

Public API
ngLory extends all lory's native API's through the method object

prev: slides to the previous slide
next: slides to the next slide
slideTo: slides to the index given as an argument: (arguments: index {number})
returnIndex: returns the index of the current slide element
setup: binds eventlisteners, merging default and user options, setup the slides based on DOM (called once during initialisation) Call setup if DOM or user options have changed or eventlisteners needs to be rebinded.
reset: sets the slider back to the starting position and resets the current index (called on Resize event)
destroy: unmount/destroy the instance of lory

Options
ngLory extends all lory's native options and can be attached through either the settings options or directly on the lory tag

waitForInit Delay init on lory until setup method is called default: false
startIndex Sets the intit slide for the slideshow 1
slidesToScroll slides scrolled at once default: 1
infinite like carousel, works with multiple slides. (do not combine with rewind) default: false (number of visible slides)
rewind if slider reached the last slide, with next click the slider goes back to the startindex. (do not combine with infinite) default: false
slideSpeed time in milliseconds for the animation of a valid slide attempt default: 300
rewindSpeed time in milliseconds for the animation of the rewind after the last slide default: 600
snapBackSpeed time for the snapBack of the slider if the slide attempt was not valid default: 200
ease cubic bezier easing functions: http://easings.net/de default: 'ease'
classNameFrame class name for slider frame default: 'js_frame'
classNameSlideContainer class name for slides container default: 'js_slides'
classNamePrevCtrl class name for slider previous control default: 'js_prev'
classNameNextCtrl class name for slider next control default: 'js_next'

Events

event.afterInit extends: after.lory.init fires after initialisation (end of setup function)
event.beforeSlide extends: before.lory.slide arguments: currentSlide, nextSlide fires before slide change
event.afterSlide extends: after.lory.slide arguments: currentSlide fires after slide change
event.resize extends: on.lory.resize fires on every resize event
event.touchStart extends: on.lory.touchstart fires on every slider touchstart event
event.touchEnd extends: on.lory.touchend fires on every slider touchend event
event.destroy extends: on.lory.destroy fires when the slider instance gets destroyed