hiddenpearls
asked on
javascript slider working ?
following code is the javascript code for slider horizontal.
i need to know how this code is working ?
anybody can explain will be grateful .
i know something javascript but this is a bit more complex.
Thanks
i need to know how this code is working ?
anybody can explain will be grateful .
i know something javascript but this is a bit more complex.
Thanks
$.fn.drag_slider = function (wrapperSelector) {
function repeat(str, num) {
return new Array( num + 1 ).join( str );
}
return this.each(function () {
var $wrapper = $(wrapperSelector, this),
$slider = $wrapper.find('ul'),
$items = $slider.find('li'),
$single = $items.filter(':first'),
singleWidth = $single.outerWidth(), //parseInt($single.width()) + parseInt($single.css('padding-left')) + parseInt($single.css('padding-right')),
visible = Math.ceil($wrapper.innerWidth() / singleWidth) <!--note: doesnt include padding or border-->
currentPage = 1,
pages = Math.ceil($items.length / visible);
// 1. Pad so that 'visible' number will always be seen, otherwise create empty items
if (($items.length % visible) != 0) {
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
// 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li'); // reselect
// 3. Set the left position to the first 'real' item
// $wrapper.css('scrollLeft', singleWidth * visible); // * -1
$wrapper.get(0).scrollLeft = singleWidth * visible;
// 4. Bind to the forward and back buttons
$('a.back', this).click(function () {
return gotoPage(currentPage - 1);
});
$('a.forward', this).click(function () {
return gotoPage(currentPage + 1);
});
// 5. paging function
function gotoPage(page) {
var dir = page < currentPage ? -1 : 1, // page < currentPage ? 1 : -1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
// alert(page);
// console.log('currentPage', currentPage, 'left', left, 'n', n);
$wrapper.filter(':not(:animated)').animate({
scrollLeft : '+=' + left
}, 500, function () {
if (page == 0) {
currentPage = pages;
// $wrapper.css('scrollLeft', singleWidth * visible * pages); // * -1
this.scrollLeft = singleWidth * visible * pages;
} else if (page > pages) {
currentPage = 1;
this.scrollLeft = singleWidth * visible; // * -1
// $wrapper.css('scrollLeft', singleWidth * visible); // * -1
// reset back to start position
} else {
currentPage = page;
}
});
return false;
}
// create a public interface to move to a specific page
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
});
};
$(function () {
$('#scrollButtons > div').before('<a href="#" class="back"><img src="images/panel-arrow-l.jpg" width="28" height="52" class="scrollLeft" /></a>').after('<a class="forward" href="#"><img src="images/panel-arrow-r.jpg" width="28" height="52" class="scrollRight" /></a>').parent().drag_slider('> div');
});
is there a certain area that you are confused on? maybe you can be more specific.
ASKER
$(function () {
$('#scrollButtons > div').before('<a href="#" class="back"><img src="images/panel-arrow-l. jpg" width="28" height="52" class="scrollLeft" /></a>').after('<a class="forward" href="#"><img src="images/panel-arrow-r. jpg" width="28" height="52" class="scrollRight" /></a>').parent().drag_sli der('> div');
});
this part is used to display two scroll buttons at left and right side.
what is this parent().drag_slider('> div'); ? in the above part.
this is the starting point of the script i think so .
$('#scrollButtons > div').before('<a href="#" class="back"><img src="images/panel-arrow-l.
});
this part is used to display two scroll buttons at left and right side.
what is this parent().drag_slider('> div'); ? in the above part.
this is the starting point of the script i think so .
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
can there be any alternate to this above code ?