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> |
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
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