jQuery photo carousel (that looks like a real carousel)?

Question

I am on the lookout for a jQuery photo carousel that can display 3 images at a time, and circle through x amount of photos (and when reaching the last, starting with the first photo again).

I made a quick mock-up of what i am looking fore - see it here.

So there is 3 photos vissible, the middle one beeing the 'main' one and a bit bigger than the previous and next (left and right). Upon clicking the next/previous arrows the next or previous photo slides into the middle and thereby becomes the main photo.

Any ideas to where i can find such a jQuery plugin/script?

Answer 1

you are looking for this: http://web.enavu.com/demos/3dcarouselwip/

UPDATED in responce to your comment!

DEMO: http://jsbin.com/ejica SOURCE http://jsbin.com/ejica/edit

---

UPDATED 2 with buttons & lightbox

DEMO: http://jsbin.com/iduyu SOURCE http://jsbin.com/iduyu/edit

$(function() {
$('.carousel').carousel();
});

(function($) {
$.fn.carousel = function() {
// 5 minutes lightweight carousel
// Copyright/Author (c) Luca Filosofi > [email protected]
// License Public
    $carousel = $(this);
    $carousel.wrap('<div id="carousel_wrapper"></div>');
    $carousel.parent().append('<div class="button" id="left"></div>'+
                              '<div class="button" id="right"></div>');

    $('img',this).attr('class', 'inactive');
    $('img:eq(1)',this).attr('class', 'left');
    $('img:eq(2)',this).attr('class', 'active');
    $('img:eq(3)',this).attr('class', 'right');

    $carousel.fadeIn(500);

    $('.button').live('click', function(e) {
        e.preventDefault();

        var mode = this.id;
        var $button = $('.' + mode );

        $button.css({ 
            'z-index' : 9999 , 
            'opacity': 0.8
        }).animate({
            'left': '90px',
            'width': '320px',
            'top': '0px',
            'opacity': 1
        }, 500, function() {

          //lightbox
          $(this).attr({'class':'active','rel':'lightbox'})
          .removeAttr('style');
          $(this).siblings().removeAttr('rel');
        });

        $button.prev().css({
            'opacity': 0.5 
        }).animate({
            'left': '0px',
            'width': '240px',
            'top': '30px',
            'opacity': 1
        }, 400, function() {

            $(this).attr('class', 'left').removeAttr('style');
            $(this).prevAll().attr('class', 'inactive');
        });

        $button.next().css({
            'opacity': 0.5 
        }).animate({
            'left': '260px',
            'width': '240px',
            'top': '30px',
            'opacity': 1
        }, 400, function() {

            $(this).attr('class', 'right').removeAttr('style');
            $(this).nextAll().attr('class', 'inactive');
        });

        if (mode == 'left') 
        $('img:last' , $carousel).prependTo($carousel);
        if (mode == 'right') 
        $('img:first' , $carousel).appendTo($carousel);

    });
}
})(jQuery);​

NOTE: the script also place a rel="lightbox" tag inside the top image, since almost the lightboxes use this tag! so change it as you need!

Answer 2

Try this:

Cloud Carousel - A 3d Carousel in Javascript

It seems to do exactly what you're looking for