Pages

Thursday, March 4, 2010

jQuery carousel lite with dynamic paging

sorry for the missing description. I will might but it on later

Resources

http://www.gmarwaha.com/jquery/jcarousellite/
http://groups.google.com/group/jquery-en/browse_thread/thread/9fec8a1746945bd2

index.htm

<script src="jcarousellite_1.0.1.min.js" type="text/javascript"></script>

<ul class="paging"></ul>
// build links  
var itemArray = new Array();
$('.carousel ul').each(function(i) {
    var carouselNavDivs = $('ul.paging');
    $(carouselNavDivs[i]).append('<li class="prev"><a><<</a></li>');
    $(this).children().each(function(j) {
        itemArray[j] = "." + j;
        var linkNum = 0;
        linkNum = j + 1;
        $(carouselNavDivs[i]).append("<li class='" + j + "'><a>" + linkNum + "</a></li>");
    });
    $(carouselNavDivs[i]).append('<li class="next"><a>>></a></li>');
});

$(function() {
    $(".carousel").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        btnGo: itemArray,
        circular: false,
        visible: 1
    });
});

jcarousellite_1.0.1.min.js

if (o.btnGo)
    $.each(o.btnGo, function(i, val) {
        $(val).click(function() {
            $.each(o.btnGo, function(i, val) {
                $(val).removeClass('active');
            });
            $(this).addClass('active');
            return go(o.circular ? o.visible + i : i);
        });
    });

Still needs to be able to select current when using prev/next