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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Can i use this carousel with touch swipe effect?
thanks!