/* carousel constructor */ function Carousel(container,list,numDisplayed,displayWidth) { var _self = this; var objContainer = container; var objList = list; var intDisplayed = numDisplayed; this.intDisplayWidth = displayWidth; var intItems = objList.children().length; this.intItemWidth = this.intDisplayWidth / intDisplayed; // one page only, no carousel for you if (intItems <= intDisplayed ) {return false;} var likeACarousel = function(move) { objList.animate({ "left": move }, { "duration": 450, "easing": "easeOutCubic" }); //console.log(move); }; this.intMaxLeft = 0;//this.intItemWidth/2; this.intMaxRight = - ((this.intItemWidth * intItems) - this.intDisplayWidth) - this.intMaxLeft; this.intLeft = 0;//-(((Math.abs(this.intMaxRight)-this.intMaxLeft)/2)-this.intMaxLeft); if (this.intLeft === 0) {this.intLeft = -this.intMaxLeft;} likeACarousel(this.intLeft); var previous = document.createElement('a'); previous.setAttribute('id','carousel_previous'); previous.className = 'widget inactive'; previous.setAttribute('href','#'); previous.innerHTML = ''; $(previous).bind("click", function(e){ e.preventDefault(); _self.scrollPrevious(); }); //$(previous).appendTo(objContainer); $(previous).insertBefore('#carouselContainer'); var next = document.createElement('a'); next.setAttribute('id','carousel_next'); next.className = 'widget'; next.setAttribute('href','#'); next.innerHTML = ''; $(next).bind("click", function(e){ e.preventDefault(); _self.scrollNext(); }); //$(next).appendTo(objContainer); $(next).insertBefore('#carouselContainer'); this.scrollNext = function() { if (this.intLeft == this.intMaxRight) {return false;} var move = this.intLeft - this.intItemWidth; if (move < this.intMaxRight) { move = this.intMaxRight; this.intLeft = this.intMaxRight; } else { this.intLeft = this.intLeft - this.intItemWidth; } likeACarousel(move); $(previous).removeClass('inactive'); if (this.intLeft == this.intMaxRight) {$(next).addClass('inactive'); return false;} }; this.scrollPrevious = function() { if (this.intLeft == this.intMaxLeft) {return false;} var move = this.intLeft + this.intItemWidth; if (move > this.intMaxLeft) { move = this.intMaxLeft; this.intLeft = this.intMaxLeft; } else { this.intLeft = this.intLeft + this.intItemWidth; } likeACarousel(move); $(next).removeClass('inactive'); if (this.intLeft == this.intMaxLeft) { $(previous).addClass('inactive'); return false; } }; } $(document).ready(function() { // add an extra class to the element for JS-only styling $("body").addClass("js"); });