Showing the position in jCarouselLite

Question

I'm using jcarousellite for a simple JQuery carousel, but I would like to alter it a bit so that images are hidden for the items to the far left and the far right, but shown on the middle items.

To do this though I need to be able to find which list items are being displayed in the view port at any one time. I've tried digging around in the source code and using the included callbacks, but I can't ever get index numbers which tally with the item being shown.

Does anyone have any experience of this or ideas on how to solve it?

EDIT

OK solved this to some extent, but it's still not working correctly. The afterEnd function is built into the plugin and provides an object of the currently visible items. I've used this to provide the IDs of the list elements, and apply some transitions.

The problem is that this is all "outside" of the plugin, so if I enable auto scrolling, all this code is ignored. I need some way of inserting this code into the functions within the plugin, and that's where I'm a bit stuck I'm afraid.

    $(".ccvi-carousel").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev",
    speed:  800,
    //auto: 2000,
    afterEnd: function(a) { 
        if (start=true) {
            $('li#1 .cf-img').hide();
        }
        left = $(a[0]).attr("id");
        mid = $(a[1]).attr("id");
        right = $(a[2]).attr("id");
        $('.prev').click(function() {
            $('li#' + left + ' .cf-img').fadeIn();
            $('li#' + mid + ' .cf-img').hide();
            $('li#' + right + ' .cf-img').hide();
        });
        $('.next').click(function() {
            $('li#' + left + ' .cf-img').hide();
            $('li#' + mid + ' .cf-img').hide();
            $('li#' + right + ' .cf-img').fadeIn();
        });             
        //alert("Left:" + left + "Middle:" + mid + "Right:" + right + "");
    }
});

I think this is the function within the plugin that I need to get my code into, but I can't see how it works.

        function go(to) {
        if(!running) {

            if(o.beforeStart)
                o.beforeStart.call(this, vis());

            if(o.circular) {            // If circular we are in first or last, then goto the other end
                if(to<=o.start-v-1) {           // If first, then goto last
                    ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
                    // If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
                    curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
                    //alert (curr);
                } else if(to>=itemLength-v+1) { // If last, then goto first
                    ul.css(animCss, -( (v) * liSize ) + "px" );
                    // If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
                    curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
                    //alert (curr);
                } else {
                    curr = to;
                    //alert (curr);
                }
            } else {                    // If non-circular and to points to first or last, we just return.
                if(to<0 || to>itemLength-v) return;
                else curr = to;
            }                           // If neither overrides it, the curr will still be "to" and we can proceed.

            running = true;

            ul.animate(
                animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
                function() {
                    //alert (curr-2);
                    if(o.afterEnd)
                        o.afterEnd.call(this, vis());
                    running = false;
                }
            );
            // Disable buttons when the carousel reaches the last/first, and enable when not
            if(!o.circular) {
                $(o.btnPrev + "," + o.btnNext).removeClass("disabled");
                $( (curr-o.scroll<0 && o.btnPrev)
                    ||
                   (curr+o.scroll > itemLength-v && o.btnNext)
                    ||
                   []
                 ).addClass("disabled");
            }

        }
        return false;
    };

Answer 1

I think this will help you:

How to get the current index with jCarousel Lite?

In addition to the above article I've set line 241 to the following

div.css({position: "relative", "z-index": "2", left: "-1144px"}); //changed the left from 0 to -1144px to allow the carousel circle to repeat offscreen

This shifts the entire carousel left. In my case I'm shifting the carousel 1144px because I have set width slides but you could just as easily calculate the left offset dynamically.

Now that I have 2 slides offscreen left I set the .jCarouselLite({ visible: 6 }); this gives me 2 visible slides in the middle and another two offscreen right.

Next place the following code anywhere after the ul.animate();

li.eq(curr+1).addClass("prev");
li.eq(curr+2).addClass("current");
li.eq(curr+3).addClass("next");

Lastly be sure to set the proper index slide to current. Following the guidelines of the linked article I'm actually starting my carousel on index 8

$(".jCarouselLite li").eq(7).addClass("prev");
$(".jCarouselLite li").eq(8).addClass("current");
$(".jCarouselLite li").eq(9).addClass("next");

To try and figure out a little more about the jCarousel Lite script you've outlined above try placing alert(curr); or console.log(curr); after each of the "if(o." areas. If all goes well you'll get the index of the current slide.