Hi,
Please see my JQuery Carousel and let me know how can i do this is an API?
I have shared my codes on http://jsfiddle.net/Jmj5u/2/
Below is my plugin
`if (window.jQuery) {
if (!window.jQuery.fn.productCarousel) {
(function ($) {
window.Config = (window.Config === undefined) ? {} : window.Config;
var Config = window.Config;
Config.productCarousel = $.extend({
slideDelay: 500,
autoInstallCss: "carousel_wrap",
productDetailCss: "#product_detail",
closeButtonCss: "close_btn",
hookName: 'carousel',
leftArrowCss: "carousel_left_arrow_handle",
rightArrowCss: "carousel_right_arrow_handle",
productContainerCss: "product_gallery",
productCss: "product",
sliderCss: "slider",
handleCss: "handle"
},
Config.productCarousel || {});
var pluginConfig = Config.productCarousel;
pluginHook = pluginConfig.hookName;
var ProductCarousel = Application.extend({
slideDelay: 1000,
autoInstallCss: "carousel_wrap",
productDetailCss: "#product_detail",
closeButtonCss: "close_btn",
hookName: 'product_carousel',
leftArrowCss: "carousel_left_arrow_handle",
rightArrowCss: "carousel_right_arrow_handle",
productContainerCss: "product_gallery",
productCss: "product",
sliderCss: "slider",
handleCss: "handle",
sliderObj: null,
productWidth: null,
itemsWidth: null,
itemsObj: null,
rightArrowObj: null,
leftArrowObj: null,
productDetailObj: null,
closeButtonObj: null,
constructor: function (config) {
this.extend($.extend({}, pluginConfig, config));
this.base.apply(this, arguments);
if (!this.domRoot) {
throw new Error('unable to find domRoot.');
}
},
install: function () {
this.itemsObj = this.domRoot.find('.' + this.productContainerCss);
this.productObj = this.domRoot.find('.' + this.productCss);
this.productDetailObj = this.domRoot.find(this.productDetailCss);
this.sliderObj = this.domRoot.find('.' + this.sliderCss);
this.rightArrowObj = this.domRoot.find('.' + this.rightArrowCss);
this.leftArrowObj = this.domRoot.find('.' + this.leftArrowCss);
this.closeButtonObj = this.domRoot.find('.' + this.closeButtonCss);
this.setProductWidth();
this.itemsWidth = this.getItemsWidth();
var itemsWidth = this.itemsWidth,
ul = this.itemsObj,
handleObj = this.domRoot.find('.' + this.handleCss),
slideDelay = this.slideDelay,
self = this;
this.sliderObj.slider({
min: 0,
max: itemsWidth,
handle: handleObj,
stop: function (event, ui) {
ul.animate({
'left': ui.value * -1
}, slideDelay);
},
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}});
this.rightArrowObj.bind('click', {
productCarousel: self
}, self.rightArrowHandler);
this.leftArrowObj.bind('click', {
productCarousel: self
}, self.leftArrowHandler);
this.productObj.bind('click', {
productCarousel: self
}, self.productHandler);
this.closeButtonObj.bind('click', {
productCarousel: self
}, self.closeButtonHandler);
return this.base.apply(this, arguments);
},
init: function () {
this.base.apply(this, arguments);
return this;
},
run: function () {
return this.base.apply(this, arguments);
},
uninstall: function () {
return this.base.apply(this, arguments);
},
destroy: function () {
this.domRoot = null;
this.base.apply(this, arguments);
},
rightArrowHandler: function (e) {
var instance = e.data.productCarousel,
elValue = instance.sliderObj.slider('option', 'value');
if (elValue < instance.itemsWidth) {
elValue = elValue + instance.productWidth;
if (elValue > instance.itemsWidth) {
elValue = instance.itemsWidth;
}
instance.sliderObj.slider('value', elValue);
instance.itemsObj.animate({
'left': elValue * -1
}, instance.slideDelay);
}
},
leftArrowHandler: function (e) {
var instance = e.data.productCarousel,
elValue = instance.sliderObj.slider('option', 'value');
if (elValue > 0) {
elValue = elValue - instance.productWidth;
if (elValue < 0) {
elValue = 0;
}
instance.sliderObj.slider('value', elValue);
instance.itemsObj.animate({
'left': elValue * -1
}, instance.slideDelay);
}
},
productHandler: function (e) {
var instance = e.data.productCarousel,
ind = $(this).index(),
leftimgswidth = instance.productWidth * ind,
shift = leftimgswidth;
instance.itemsObj.animate({
'left': shift * -1
}, instance.slideDelay);
instance.productDetailObj.show();
instance.leftArrowObj.hide();
instance.rightArrowObj.hide();
},
closeButtonHandler: function (e) {
var instance = e.data.productCarousel,
elValue = instance.sliderObj.slider('option', 'value');
instance.itemsObj.animate({
'left': elValue * -1
}, instance.slideDelay);
instance.productDetailObj.hide();
instance.leftArrowObj.show();
instance.rightArrowObj.show();
},
setProductWidth: function () {
this.productWidth = this.productObj.width();
},
getItemsWidth: function () {
return (this.itemsObj.innerWidth() - 5 * (this.productWidth));
}
}, {
onUnloadHandler: function () {
$.each($.fn.productCarousel.cache, function (name, item) {
item.uninstall().destroy();
});
}
});
var pluginWrapper = generateJqueryPluginWrapper(pluginHook, function (config) {
return new ProductCarousel(config);
});
pluginWrapper.counter = 1;
pluginWrapper.cache = {};
$.fn.productCarousel = pluginWrapper;
$(document).ready(function () {
$("." + pluginConfig.autoInstallCss).productCarousel();
});
$(window).unload(ProductCarousel.onUnloadHandler);
})(jQuery);
}}else {throw new Error('jQuery library is required.');}
`