Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

UI/slideshow adding the auto-play mode

  • Loading branch information...
commit a6d394feb080306035aabb5e7d1e05136436ff66 1 parent 928a6a0
@MadRabbit MadRabbit authored
View
11 ui/slideshow/README.md
@@ -21,6 +21,15 @@ You also can instantiate `Slideshow` object existing objects
new Slideshow($('#my-list')[0], {... options ...});
```
+## Options
+
+You can use the following list of options
+
+* `fxDuration` - the sliding visual effect duration
+* `autoplay` - automatically swap the items on the list
+* `delay` - delay between switches in the autoplay mode
+* `loop` - start from the beginning when finished
+
## Public API
@@ -33,6 +42,8 @@ available as part of the public API with all the `Slideshow` class instances
* `previous()` - slide to the previous item on the list
* `next()` - slide to the next item on the list
* `slideTo(index)` - slide to an item with the (integer) index
+* `play()` - starts the auto-play mode
+* `pause()` - stops the auto-play mode
## Copyright And License
View
35 ui/slideshow/index.html
@@ -13,10 +13,9 @@
border-radius: .5em;
}
ol.custom-slideshow li {
- background: pink;
- width: 500px;
+ width: 400px;
height: 400px;
- padding: 2em;
+ padding: 1em;
text-align: center;
}
</style>
@@ -33,18 +32,28 @@
<li><img src="http://rightjs.org/images/test/6-med.jpg"></li>
</ul>
+ <h2>Auto Playing Slideshow</h2>
+
+ <ul class="lui-slideshow" data-slideshow='{"autoplay": true}'>
+ <li><img src="http://rightjs.org/images/test/1-med.jpg"></li>
+ <li><img src="http://rightjs.org/images/test/2-med.jpg"></li>
+ <li><img src="http://rightjs.org/images/test/3-med.jpg"></li>
+ <li><img src="http://rightjs.org/images/test/4-med.jpg"></li>
+ <li><img src="http://rightjs.org/images/test/5-med.jpg"></li>
+ <li><img src="http://rightjs.org/images/test/6-med.jpg"></li>
+ </ul>
+
+
<h2>Slideshow With Custom Styles</h2>
- <p>
- <ol class="lui-slideshow custom-slideshow">
- <li><img src="http://rightjs.org/images/test/1-med.jpg"></li>
- <li><img src="http://rightjs.org/images/test/2-med.jpg"></li>
- <li><img src="http://rightjs.org/images/test/3-med.jpg"></li>
- <li><img src="http://rightjs.org/images/test/4-med.jpg"></li>
- <li><img src="http://rightjs.org/images/test/5-med.jpg"></li>
- <li><img src="http://rightjs.org/images/test/6-med.jpg"></li>
- </ol>
- </p>
+ <ol class="lui-slideshow custom-slideshow">
+ <li><img src="http://rightjs.org/images/test/1-med.jpg"></li>
+ <li><img src="http://rightjs.org/images/test/2-med.jpg"></li>
+ <li><img src="http://rightjs.org/images/test/3-med.jpg"></li>
+ <li><img src="http://rightjs.org/images/test/4-med.jpg"></li>
+ <li><img src="http://rightjs.org/images/test/5-med.jpg"></li>
+ <li><img src="http://rightjs.org/images/test/6-med.jpg"></li>
+ </ol>
<p class="white-space"></p>
</body>
View
40 ui/slideshow/src/slideshow.coffee
@@ -8,6 +8,9 @@ class Slideshow extends Element
extend:
Options:
fxDuration: 'normal'
+ autoplay: false
+ delay: 4000
+ loop: true
currentIndex: null
@@ -19,13 +22,20 @@ class Slideshow extends Element
# @return {Slideshow} this
#
constructor: (element, options)->
- @$super(element._).setOptions(options)
+ @$super(element._).setOptions(@data('slideshow'))
@controls = new Element('div', {class: 'lui-slideshow-controls'}).append(
@prev_button = new Icon(class: 'lui-icon-previous2').on('click', => @previous()),
@next_button = new Icon(class: 'lui-icon-next2').on('click', => @next()))
+ @on
+ mouseenter: => @__hovering = true
+ mouseleave: => @__hovering = false
+
@append(@controls).slideTo(0)
+ @play() if @options.autoplay
+
+ return @
#
# Returns the list of items
@@ -88,6 +98,34 @@ class Slideshow extends Element
return @
+ #
+ # Starts auto-play mode
+ #
+ # @return {Slideshow} this
+ #
+ play: ->
+ @_timer or= window.setInterval =>
+ unless @__hovering
+ if @hasNext()
+ @next()
+ else if @options.loop
+ @slideTo(0)
+ , @options.delay
+
+ return @
+
+ #
+ # Pauses auto-play mode
+ #
+ # @return {Slideshow} this
+ #
+ pause: ->
+ if @_timer
+ window.clearInterval(@_timer)
+ delete(@_timer)
+
+ return @
+
# protected
Please sign in to comment.
Something went wrong with that request. Please try again.