Create a gist now

Instantly share code, notes, and snippets.

@abernier /README.md
Last active Jun 27, 2017

What would you like to do?
<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>
(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);
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment