Question

I have this situation. The two items in the middle are always bigger than the others and I don’t know how to get it.
I’m using jcarousel. If there’s another alternative jquery plugin, it will be welcome.

Answer 1

wat jQuery alternative 😉 it is very simple but works

http://codepen.io/dmi3y/full/dCvkl

okay example is on codepen, the heart of it is snippet

(function(){
    $('.scroll-gal').each(function(){
        var el = $(this), ul = $('ul', el);
        $('div', el).not('.vewport').click(function(){
            if(ul.is(':animated')) return;
            var dly = 200, first = $('li:first', ul), last = $('li:last', ul);
            switch($(this).css('float')){
            case 'left':
                ul.css('left', -last.outerWidth(true)).prepend(last).animate({'left': 0}, dly);
            break;
            case 'right':
                ul.animate({'left': -first.outerWidth(true)}, dly, function(){
                    $(this).append(first).css('left', 0)
                });
            break;
            }
        });
    });
})();

Core idea just in heavy DOM manipulations, I need explain it a bit.

okay what’s going on when you click on right button:

ul.animate({'left': -first.outerWidth(true)}, dly, function(){
    $(this).append(first).css('left', 0)
});

First animate the whole ul container to right, and at the end of animation just took the first item into the list, put it at the end. That’s easy.

Left animation is bit trickier:

ul.css('left', -last.outerWidth(true)).prepend(last).animate({'left': 0}, dly);

At the first point did fast moving for ul container to the right (negative left), than instantly took last item and put it on the first place, and just after this animate to the left.

You see, so many calls under the hood, that’s why it is heavy. But it will work smooth, at the most of implementations, though it has huge potential for optimization.