jQuery carousel pagination?
I am creating jquery carousel for video gallery. I need to create a pagination for this. I have already created this but that is not genric script for pagination I have hard coded the Pagination object in script. I want to make it genric so that i can use this multiple time on same page. even not able to access the target object of carousel.
For E.g
Total Item is 12 Scroll Item :- 3 at time Pagination shoul be - 1, 2,3,4 (4 x 3 =12)
If someone can help me on this. Thanks in advance
Source http://sorgalla.com/jcarousel/
here is code
Script for init jquery carosuel
slidingCarosuel:function(getElements,paginationNum){
var myCarousel=jQuery(getElements);
if (myCarousel) {
jQuery(myCarousel).jcarousel({
scroll: paginationNum,
initCallback:clasohlson.carosuelPagination
});
}
}
This script creating pagination
carosuelPagination:function(carousel) {
_scrolls=carousel.options.scroll;
carousel.options.scroll = jQuery.jcarousel.intval(_scrolls);
var noLi = carousel.options.size;
var requiredLi = Math.ceil(noLi / _scrolls);
for (var i = 0; i < requiredLi; i++) {
var count = i + 1;
var liSrting = "<li>" + count + "</li>开发者_运维知识库";
$(".hmPagination").append(liSrting);
}
if (noLi <= _scrolls) {
$(".hmPagination").hide();
$(".jcarousel-prev").hide();
$(".jcarousel-next").hide();
}
else {
//$(".hmPagination").show().text("");
$(".jcarousel-prev").show();
$(".jcarousel-next").show();
}
$(".hmPagination").children(":first").addClass("selected");
$(".jcarousel-next").click(function() {
$(".hmPagination").find("li.selected").next().addClass("selected");
$(".hmPagination").find("li.selected:last").prev().removeClass("selected");
})
$(".jcarousel-prev").click(function() {
$(".hmPagination").find("li.selected:last").prev().addClass("selected");
$(".hmPagination li.selected").next().removeClass("selected")
})
$('.hmPagination li').each(function() {
$(this).bind("click", function() {
$('.hmPagination li').removeClass("selected");
$(this).addClass("selected");
var noClick = parseInt($(this).text());
var remain = noLi % 1;
if ($(this).text() == "1") {
carousel.scroll(jQuery.jcarousel.intval(1))
}
if (remain == 0) {
var ulLi = $("ul.pagination li").length
var scrollNo = ((noClick - 1) * 1) + 1
carousel.scroll(jQuery.jcarousel.intval(scrollNo))
} else {
var scrollNo = ((noClick - 1) * 1) + 1
carousel.scroll(jQuery.jcarousel.intval(scrollNo))
}
//carousel.scroll(jQuery.jcarousel.intval(firstItem));
// return false;
})
});
}
Here is Html
<ul class="carosuelList">
<li>
<img src="images/products/thumbnail-video.jpg" alt="article video" />
</li>
<li>
<img src="images/products/thumbnail-video.jpg" alt="article video" />
</li>
<li>
<img src="images/products/thumbnail-video.jpg" alt="article video" />
</li>
<li>
<img src="images/products/thumbnail-video.jpg" alt="article video" />
</li>
</ul>
<ul class="hmPagination"><li></li></ul>
Here is script for making pagination
carosuelPagination:function(carousel) {
tempVar=carousel.list[0];
idx=jQuery(tempVar).attr("id");
_scrolls=carousel.options.scroll;
carousel.options.scroll = jQuery.jcarousel.intval(_scrolls);
pagination='<ul class="pagination"></ul>';
var noLi = carousel.options.size;
jQuery("#"+idx).parents(".smallCarosuelbox").append(pagination);
p=jQuery("#"+idx).parents(".smallCarosuelbox").find(".pagination");
var requiredLi = Math.ceil(noLi / _scrolls);
for (var i = 0; i < requiredLi; i++) {
var count = i + 1;
var liSrting = "<li>" + count + "</li>";
p.append(liSrting+"");
}
if (noLi <= _scrolls) {
p.hide();
$(".jcarousel-prev,.jcarousel-next").hide();
}
else {
$(".jcarousel-prev,.jcarousel-next").show();
}
p.find("li:first").addClass("selected");
p.find('li').each(function() {
$(this).bind("click", function(e) {
jQuery(e.target).parent().find('li').removeClass("selected");
$(this).addClass("selected");
var noClick = parseInt($(this).text());
var remain = noLi % _scrolls;
if ($(this).text() == "1") {
carousel.scroll(jQuery.jcarousel.intval(1))
}
if (remain == 0) {
var ulLi = $("ul.pagination li").length
var scrollNo = ((noClick - 1) * _scrolls) + 1
carousel.scroll(jQuery.jcarousel.intval(scrollNo))
} else {
var scrollNo = ((noClick - 1) * _scrolls) + 1
carousel.scroll(jQuery.jcarousel.intval(scrollNo))
}
})
});
},
精彩评论