Hi,
I have done a Customised carousel with my understanding. To develop a Product Carousel, I stucked with making this as an object oriented carousel. If you help me to re-edit my Jquery('Carousel_plugin.js') to like as ('should_be_like_this.js') then the codes would looks more structured. The requirment is to use below things:
Please open my codes here : Download my Carousel Here
Class ProductCarousel:
ProductCarousel constructor(Object params): create instance, extend with custom params
ProductCarousel init(): initialise internal vars. returns self
ProductCarousel install(): register event handlers on DOM. returns self
ProductCarousel uninstall(): unregister event handlers on DOM. Returns self
ProductCarousel destroy(): unset all internal vars (instance should not be able to work after this). Returns self.
ProductCarousel addItem(DOM domItem): add an item in the carousel’s internal view of the items list. An item is, admittedly a LI tag with a particular CSS class. The DOM element is already on the page, which ensures natural order of items within the OL/UL tag.
ProductCarousel removeItem(DOM domItem, Bool removeFromDOM): [optional] removes an item from the internal items list
int getCurrentIndex(): returns index of the current item at the left-most position of the carousel.
DOM getItemPerIndex(int index): returns the DOM element of the item from its index
int getIndexOfItem(DOM domItem): returns the index position of a given item
ProductCarousel slideToIndex(int index): slide display of the carousel to the given index position
ProductCarousel slideToItem(DOM domItem): slide display of the carousel to a given item
ProductCarousel slideTo(int index / DOM domItem): slide display of the carousel to a given item or index position
ProductCarousel showItemPanel(int index / DOM domItem): show the item panel (summary) of a given index or item
ProductCarousel hideItemPanel(int index / DOM domItem): hide the item panel (summary) of a given index or item
ProductCarousel focusOnItem(int index / DOM domItem): slide to the given index or item and show the item panel. Note that you should keep the initial item/index in memory for unfocusOnItem()
ProductCarousel unfocusOnItem(int index / DOM domItem): hide the current item panel and slide back to the previous index or item.
My Codes as Below: for Carousel.js
(function ($) {
$.fn.carosel = function (params) { /**** Name: JQuery carousels **/
options = $.extend({}, $.fn.carosel.defaults, params || {});
//var container=$(this);
var container = $('.sliderCarousels');
//var ul = $('ul',container);
var handleCss = "carousel_left_arrow_handle";
var rightArrow = $(".carousel_right_arrow_handle")
var productWidth = 170;
var slideDelay = 500;
var handle = $("." + handleCss);
var ul = $(".sliderCarousels ul");
var li = $(".sliderCarousels ul li")
var slider = $(".sliderCarousels .slider");
var leftArrow = $(".carousel_left_arrow_handle");
var productDetail = $("#productDetail")
var closeButton = $("#productDetail .closeBtn");
var itemsWidth = ul.innerWidth() - productWidth;
slider.slider({
min: 0,
max: itemsWidth,
handle: '.handle',
stop: function (event, ui) {ul.animate({'left' : ui.value * -1}, slideDelay);},
slide: function (event, ui) {
ul.css('left', ui.value * -1, slideDelay)
;},
});
leftArrow.click(function () {
var elValue = slider.slider('option', 'value');
// alert (elValue);
if (elValue > 0) {
elValue = elValue - productWidth;
if (elValue < 0) {
elValue = 0;
}
slider.slider('value', elValue);
ul.animate({
'left': elValue * -1
}, slideDelay);
}
});
rightArrow.click(function () {
var elValue = $('.slider', container).slider('option', 'value');
if (elValue < itemsWidth) {
elValue = elValue + productWidth;
if (elValue > itemsWidth) {
elValue = itemsWidth;
}
slider.slider('value', elValue);
ul.animate({
'left': elValue * -1
}, slideDelay);
}
});
li.click(function () {
var elValue = $('.slider', container).slider('option', 'value'); //alert('a'+elValue);
var ind = $(this).index();
leftimgswidth = 170 * ind;
var shift = leftimgswidth;
var elValue = shift;
ul.animate({
'left': shift * -1
}, slideDelay);
//$(".sliderCarousels .slider").slider('value', elValue);
productDetail.show();
leftArrow.hide();
rightArrow.hide();
});
closeButton.click(function () {
var elValue = slider.slider('option', 'value');
ul.animate({
'left': elValue * -1
}, slideDelay);
productDetail.hide();
leftArrow.show();
rightArrow.show();
});
}
})(jQuery);