Created
November 24, 2012 23:19
-
-
Save jjulian/4141779 to your computer and use it in GitHub Desktop.
A simple carousel implemented with a single Backbone view
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <style> | |
| #my-carousel { border: 1px solid #000; padding: 10px; } | |
| .carousel-item { display: none; position: relative; padding: 0 30px;} | |
| .carousel-item .carousel-prev { position: absolute; left: 0; } | |
| .carousel-item .carousel-next { position: absolute; right: 0; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>A fade-transition Backbone carousel</h1> | |
| <p>Define a container, and place carousel items inside, each with a | |
| class of <code>carousel-item</code>. Clicks on anything with class <code>carousel-prev</code> and | |
| <code>carousel-next</code> will advance the carousel. Pass a selector for the top-level container | |
| into the constructor as <code>el</code>.</p> | |
| <p>There is minimal style here. It's only important to hide all of the <code>carousel-item</code>s and allow the Backbone view to manage their visibility.</p> | |
| <div id="my-carousel"> | |
| <div class="carousel-item"> | |
| <button class="carousel-prev">«</button> | |
| Item One | |
| <button class="carousel-next">»</button> | |
| </div> | |
| <div class="carousel-item"> | |
| <button class="carousel-prev">«</button> | |
| Item Two | |
| <button class="carousel-next">»</button> | |
| </div> | |
| <div class="carousel-item"> | |
| <button class="carousel-prev">«</button> | |
| Item Three | |
| <button class="carousel-next">»</button> | |
| </div> | |
| </div> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script> | |
| <script> | |
| Carousel = Backbone.View.extend({ | |
| events: { | |
| 'click .carousel-prev': 'prev', | |
| 'click .carousel-next': 'next' | |
| }, | |
| initialize: function(options) { | |
| _.bindAll(this); | |
| this.items = _.map(this.$('.carousel-item').hide(), function(i) { return i; }); | |
| this.current = 0; | |
| }, | |
| render: function() { | |
| $(this.items[this.current]).show(); | |
| return this; | |
| }, | |
| prev: function() { | |
| $(this.items[this.current]).fadeOut(function() { | |
| this.current = this.current - 1; | |
| if (this.current === -1) { this.current = this.items.length - 1 } | |
| $(this.items[this.current]).fadeIn(); | |
| }.bind(this)); | |
| }, | |
| next: function() { | |
| $(this.items[this.current]).fadeOut(function() { | |
| this.current = this.current + 1; | |
| if (this.current === this.items.length) { this.current = 0 } | |
| $(this.items[this.current]).fadeIn(); | |
| }.bind(this)); | |
| } | |
| }); | |
| var carousel = new Carousel({el: '#my-carousel'}).render(); | |
| </script> | |
| </body> | |
| </html> |
Sure it can! You just need to set up a thread to do the rotation after a period of time. Add this code (untested), then call start(5000) after the carousel is created:
start: function(delay) {
this.delay = delay;
this.nextRotationID = setTimeout(this.rotate, this.delay);
},
rotate: function() {
this.next();
this.nextRotationID = setTimeout(this.rotate, this.delay);
}
Cool carousel, however it has a bug, when clicking next or back twice fast (which can happen on people that dont yet know single click is enough) it shows the next picture under the first instead of skipping to the next
Can i use this carousel with touch swipe effect?
thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, can this carousel have autoplay by default?
Great job, it looks I could use it without much hassle tampering with server files and javascript.
Thanks