jjulian · November 28, 2012 20:58
diff --git a/backbone-carousel-auto.html b/backbone-carousel-auto.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <style>
      #my-carousel { border: 1px solid #000; padding: 10px; position: relative; width: 50%; }
      .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>
    <p>The carousel can be set to auto-advance, by calling <code>startRotating()</code>. Or the
      user can be in control using the <code>toggle</code> button.</p>

    <div id="my-carousel">
      <button class="toggle">Start</button>
      <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',
          'click .toggle':        'toggle'
        },
        initialize: function(options) {
          _.bindAll(this);
          this.defaultDelay = options.defaultDelay;
          this.items = _.map(this.$('.carousel-item').hide(), function(i) { return i; });
          this.current = 0;
        },
        render: function() {
          this.$el.append($(this.items[this.current]).show());
          return this;
        },
        prev: function() {
          if (this.nextRotationID) {
            clearTimeout(this.nextRotationID);
            this.nextRotationID = setTimeout(this.doNextRotation, this.delay);
          }
          this.rotateLeft();
        },
        rotateLeft: function() {
          $(this.items[this.current]).fadeOut(function() {
            this.$('.carousel-item').hide();
            this.current = this.current - 1;
            if (this.current === -1) { this.current = this.items.length - 1 }
            $(this.items[this.current]).fadeIn();
          }.bind(this));
        },
        next: function() {
          if (this.nextRotationID) {
            clearTimeout(this.nextRotationID);
            this.nextRotationID = setTimeout(this.doNextRotation, this.delay);
          }
          this.rotateRight();
        },
        rotateRight: function() {
          $(this.items[this.current]).fadeOut(function() {
            this.$('.carousel-item').hide();
            this.current = this.current + 1;
            if (this.current === this.items.length) { this.current = 0 }
            $(this.items[this.current]).fadeIn();
          }.bind(this));
        },
        doNextRotation: function() {
          this.rotateRight();
          this.nextRotationID = setTimeout(this.doNextRotation, this.delay);
        },
        toggle: function() {
          if (this.delay) {
            this.stopRotating();
            this.$('.toggle').text('Start');
          } else {
            this.startRotating(this.defaultDelay);
            this.$('.toggle').text('Stop');
          }
        },
        startRotating: function(delay) {
          if (!this.delay) {
            this.delay = delay;
            this.nextRotationID = setTimeout(this.doNextRotation, this.delay);
          }
        },
        stopRotating: function() {
          if (this.nextRotationID) {
            clearTimeout(this.nextRotationID);
          }
          this.delay = null;
        }
      });
      var carousel = new Carousel({el: '#my-carousel', defaultDelay: 2000}).render();
      //carousel.startRotating(2000);
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<style>
	#my-carousel { border: 1px solid #000; padding: 10px; position: relative; width: 50%; }
	.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>
	<p>The carousel can be set to auto-advance, by calling <code>startRotating()</code>. Or the
	user can be in control using the <code>toggle</code> button.</p>

	<div id="my-carousel">
	<button class="toggle">Start</button>
	<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',
	'click .toggle': 'toggle'
	},
	initialize: function(options) {
	_.bindAll(this);
	this.defaultDelay = options.defaultDelay;
	this.items = _.map(this.$('.carousel-item').hide(), function(i) { return i; });
	this.current = 0;
	},
	render: function() {
	this.$el.append($(this.items[this.current]).show());
	return this;
	},
	prev: function() {
	if (this.nextRotationID) {
	clearTimeout(this.nextRotationID);
	this.nextRotationID = setTimeout(this.doNextRotation, this.delay);
	}
	this.rotateLeft();
	},
	rotateLeft: function() {
	$(this.items[this.current]).fadeOut(function() {
	this.$('.carousel-item').hide();
	this.current = this.current - 1;
	if (this.current === -1) { this.current = this.items.length - 1 }
	$(this.items[this.current]).fadeIn();
	}.bind(this));
	},
	next: function() {
	if (this.nextRotationID) {
	clearTimeout(this.nextRotationID);
	this.nextRotationID = setTimeout(this.doNextRotation, this.delay);
	}
	this.rotateRight();
	},
	rotateRight: function() {
	$(this.items[this.current]).fadeOut(function() {
	this.$('.carousel-item').hide();
	this.current = this.current + 1;
	if (this.current === this.items.length) { this.current = 0 }
	$(this.items[this.current]).fadeIn();
	}.bind(this));
	},
	doNextRotation: function() {
	this.rotateRight();
	this.nextRotationID = setTimeout(this.doNextRotation, this.delay);
	},
	toggle: function() {
	if (this.delay) {
	this.stopRotating();
	this.$('.toggle').text('Start');
	} else {
	this.startRotating(this.defaultDelay);
	this.$('.toggle').text('Stop');
	}
	},
	startRotating: function(delay) {
	if (!this.delay) {
	this.delay = delay;
	this.nextRotationID = setTimeout(this.doNextRotation, this.delay);
	}
	},
	stopRotating: function() {
	if (this.nextRotationID) {
	clearTimeout(this.nextRotationID);
	}
	this.delay = null;
	}
	});
	var carousel = new Carousel({el: '#my-carousel', defaultDelay: 2000}).render();
	//carousel.startRotating(2000);
	</script>
	</body>
	</html>