/*
- File: jquery.flexisel.js
- Version: 1.0.0
- Description: Responsive carousel jQuery plugin
- Author: 9bit Studios
- Copyright 2012, 9bit Studios
- http://www.9bitstudios.com
- Free to use and abuse under the MIT license.
- http://www.opensource.org/licenses/mit-license.php
- /
(function ($) {
$.fn.flexisel = function (options) {
var defaults = $.extend({ visibleItems: 4, animationSpeed: 200, autoPlay: false, autoPlaySpeed: 3000, pauseOnHover: true,
setMaxWidthAndHeight: false,
enableResponsiveBreakpoints: false, responsiveBreakpoints: {
portrait: { changePoint:480, visibleItems: 1 }, landscape: { changePoint:640, visibleItems: 2 }, tablet: { changePoint:768, visibleItems: 3 }
} }, options);
/****************************** Private Variables *******************************/
var object = $(this);
var settings = $.extend(defaults, options); var itemsWidth; // Declare the global width of each item in carousel var canNavigate = true;
var itemsVisible = settings.visibleItems;
/****************************** Public Methods *******************************/
var methods = {
init: function() {
return this.each(function () { methods.appendHTML(); methods.setEventHandlers(); methods.initializeItems();
}); },
/****************************** Initialize Items *******************************/
initializeItems: function() {
var listParent = object.parent(); var innerHeight = listParent.height(); var childSet = object.children();
var innerWidth = listParent.width(); // Set widths itemsWidth = (innerWidth)/itemsVisible; childSet.width(itemsWidth); childSet.last().insertBefore(childSet.first()); childSet.last().insertBefore(childSet.first()); object.css({'left' : -itemsWidth});
object.fadeIn();
$(window).trigger("resize"); // needed to position arrows correctly
},
/******************************
Append HTML
*******************************/
appendHTML: function() {
object.addClass("nbs-flexisel-ul");object.wrap("
object.find("li").addClass("nbs-flexisel-item"); if(settings.setMaxWidthAndHeight) {
var baseWidth = $(".nbs-flexisel-item > img").width(); var baseHeight = $(".nbs-flexisel-item > img").height(); $(".nbs-flexisel-item > img").css("max-width", baseWidth); $(".nbs-flexisel-item > img").css("max-height", baseHeight);
}$("").insertAfter(object);
var cloneContent = object.children().clone(); object.append(cloneContent);
},
/******************************
Set Event Handlers
*******************************/
setEventHandlers: function() {
var listParent = object.parent(); var childSet = object.children(); var leftArrow = listParent.find($(".nbs-flexisel-nav-left")); var rightArrow = listParent.find($(".nbs-flexisel-nav-right"));
$(window).on("resize", function(event){
methods.setResponsiveEvents();
var innerWidth = $(listParent).width(); var innerHeight = $(listParent).height();
itemsWidth = (innerWidth)/itemsVisible;
childSet.width(itemsWidth); object.css({'left' : -itemsWidth});
var halfArrowHeight = (leftArrow.height())/2; var arrowMargin = (innerHeight/2) - halfArrowHeight; leftArrow.css("top", arrowMargin + "px"); rightArrow.css("top", arrowMargin + "px");
});
$(leftArrow).on("click", function (event) { methods.scrollLeft(); });
$(rightArrow).on("click", function (event) { methods.scrollRight(); });
if(settings.pauseOnHover == true) { $(".nbs-flexisel-item").on({ mouseenter: function () { canNavigate = false; }, mouseleave: function () { canNavigate = true; } }); }
if(settings.autoPlay == true) {
setInterval(function () { if(canNavigate == true) methods.scrollRight(); }, settings.autoPlaySpeed); }
},
/****************************** Set Responsive Events *******************************/
setResponsiveEvents: function() { var contentWidth = $('html').width();
if(settings.enableResponsiveBreakpoints == true) { if(contentWidth < settings.responsiveBreakpoints.portrait.changePoint) { itemsVisible = settings.responsiveBreakpoints.portrait.visibleItems; } else if(contentWidth > settings.responsiveBreakpoints.portrait.changePoint && contentWidth < settings.responsiveBreakpoints.landscape.changePoint) { itemsVisible = settings.responsiveBreakpoints.landscape.visibleItems; } else if(contentWidth > settings.responsiveBreakpoints.landscape.changePoint && contentWidth < settings.responsiveBreakpoints.tablet.changePoint) { itemsVisible = settings.responsiveBreakpoints.tablet.visibleItems; } else { itemsVisible = settings.visibleItems; } } },
/****************************** Scroll Left *******************************/
scrollLeft:function() {
if(canNavigate == true) { canNavigate = false;
var listParent = object.parent(); var innerWidth = listParent.width();
itemsWidth = (innerWidth)/itemsVisible;
var childSet = object.children();
object.animate({ 'left' : "+=" + itemsWidth }, { queue:false, duration:settings.animationSpeed, easing: "linear", complete: function() { childSet.last().insertBefore(childSet.first()); // Get the first list item and put it after the last list item (that's how the infinite effects is made) methods.adjustScroll(); canNavigate = true; } } ); } },
/****************************** Scroll Right *******************************/
scrollRight:function() {
if(canNavigate == true) { canNavigate = false;
var listParent = object.parent(); var innerWidth = listParent.width();
itemsWidth = (innerWidth)/itemsVisible;
var childSet = object.children();
object.animate({ 'left' : "-=" + itemsWidth }, { queue:false, duration:settings.animationSpeed, easing: "linear", complete: function() { childSet.first().insertAfter(childSet.last()); // Get the first list item and put it after the last list item (that's how the infinite effects is made) methods.adjustScroll(); canNavigate = true; } } ); } },
/****************************** Adjust Scroll *******************************/
adjustScroll: function() {
var listParent = object.parent(); var childSet = object.children();
var innerWidth = listParent.width(); itemsWidth = (innerWidth)/itemsVisible; childSet.width(itemsWidth); object.css({'left' : -itemsWidth}); }
}; if (methods[options]) { // $("#element").pluginName('methodName', 'arg1', 'arg2'); return methods[options].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof options === 'object' || !options) { // $("#element").pluginName({ option: 1, option:2 }); return methods.init.apply(this); } else { $.error( 'Method "' + method + '" does not exist in flexisel plugin!'); }
};
})(jQuery);