jjulian/backbone-carousel.html

## backbone-carousel.html
<!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">&laquo;</button>
        Item One
        <button class="carousel-next">&raquo;</button>
      </div>
      <div class="carousel-item">
        <button class="carousel-prev">&laquo;</button>
        Item Two
        <button class="carousel-next">&raquo;</button>
      </div>
      <div class="carousel-item">
        <button class="carousel-prev">&laquo;</button>
        Item Three
        <button class="carousel-next">&raquo;</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>
	<!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>