README.md

<ul class="mycarousel">
  <li>A</li>
  <li class="active">B</li>
  <li>C</li>
</ul>
<nav>
  <a rel="prev" href="javascript:void 0;">Prev</a>
  <a rel="next" href="javascript:void 0;">Next</a>
</nav>

<script>
var mycarousel  = new CarouselView({
  el: '.mycarousel',
  items: 'li',           // optional, default: '>*'
  prev: 'nav a[rel="prev"]', // optional
  next: 'nav a[rel="next"]', // optional
  noloop: true, // optionnal
});

mycarousel.go(2); // go to the 3rd item
mycarousel.prev(); // by default 1-by-1, ie equivalent to: `carousel.prev(1)`
mycarousel.next(3); // or here, 3 next ahead

mycarousel.$prev.click(mycarousel.prev);
mycarousel.$next.click(mycarousel.next);

// mycarousel.currentIndex -- current index
// mycarousel.previousIndex -- current index
// mycarousel.$nth(1) -- 2nd carousel element
// mycarousel.on('carouselchange', function () {alert('carousel has changed!');})
// mycarousel.$current -- current active item (NB: shortcut for `carousel.$nth(carousel.currentIndex)`)
// mycarousel.$previous -- previous active item (NB: shortcut for `carousel.$nth(carousel.previousIndex)`)

// mycarousel.$prev -- previous "arrow" element
// mycarousel.$next -- next "arrow" element
</script>

carouselview.js

(function () {
  var _ = this._ || require('lodash');
  var $ = this.jQuery || require('jquery');
  var Backbone = this.Backbone || require('backbone');
  Backbone.$ = $;
  
  var CarouselView = Backbone.View.extend({
    initialize: function (options) {
      options || (options = {});
      _.defaults(options, {
        klass: {
          carousel: 'carousel',
          change: 'carouselchange',
          active: 'active',
          previous: 'previous',
          forward: 'forward',
          backward: 'backward'
        }
      })
      this.options = options;

      if (_.has(options, 'prev')) {
        this.$prev = $(options.prev);
      }
      if (_.has(options, 'next')) {
        this.$next = $(options.next);
      }

      this.$el.addClass(this.options.klass.carousel);

      this.$items = options.items && this.$(options.items) || this.$el.find('>*');

      this.l = options.max || this.$items.length;
      this.step = options.step || 1;

      // currentIndex is either the index of the 'active' element or 0
      var currentIndex = (this.$items.index('.'+this.options.klass.active) - 1);
      if (currentIndex < 0) {currentIndex = 0;}

      this.currentIndex = currentIndex;

      /*if (this.$next) {
        this.$next.click(this.next.bind(this));
      }
      if (this.$prev) {
        this.$prev.click(this.prev.bind(this));
      }*/
    },
    $nth: function $nth(index) {
      return this.$items.eq(Math.abs(this.l+index)%this.l);
    },
    prev: function prev(incr) {
      return this.go(this.currentIndex-(incr || this.step));
    },
    next: function next(incr) {
      return this.go(this.currentIndex+(incr || this.step));
    },
    go: function go(index) {
      var dir;
      if (index >= this.currentIndex) {
        dir = 1;
      } else {
        dir = -1;
      }

      // Remember the previous item
      this.previousIndex = this.currentIndex;
      this.$previous = this.$nth(this.previousIndex);

      if (this.options.noloop === true) {
        index = Math.max(0, index);
        index = Math.min((this.l - 1), index);
      }
      this.currentIndex = index%this.l;
      //console.log('currentIndex', this.currentIndex, this)
      
      // Remember the current item
      this.$current = this.$nth(this.currentIndex);

      this.$el.removeClass([this.options.klass.forward, this.options.klass.backward].join(' ')).addClass(dir > 0 ? this.options.klass.forward : this.options.klass.backward);

      this.$items.removeClass(this.options.klass.previous);
      this.$previous.addClass(this.options.klass.previous);

      this.$items.removeClass(this.options.klass.active);
      this.$current.addClass(this.options.klass.active);

      this.trigger(this.options.klass.change);

      return this.currentIndex;
    }
  });

  this.CarouselView = CarouselView;
  if (typeof module !== "undefined" && module !== null) {
    module.exports = this.CarouselView;
  }
}).call(this);

package.json

{
  "name": "carouselview",
  "version": "0.1.1",
  "description": "",
  "main": "carouselview.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://gist.github.com/83eee1cf3c019a0fa43d.git"
  },
  "author": "Antoine BERNIER",
  "license": "ISC",
  "dependencies": {
    "jquery": "^2.1.1",
    "lodash": "^3.10.1",
    "backbone": "^1.1.2"
  }
}