jCarousel should zoom a slide to center bottom

Question

I like the slider/carousel on this site so I'm trying to replicate it.

My problem is with the zooming, I cannot get it to zoom in the same way.

What I want is for it to scale to center bottom like on the example website.

Here's what I have so far: JSFiddle

jCarousel:

    // Initialize jCarousel
    carousel.jcarousel({
        vertical: true,
        center: true,
        wrap: 'circular',
        animation: {
            duration: 1500,
            easing:   'linear'
        }
    });

    // Bind events
    carousel.on('jcarousel:animate', function (event, carousel) {
        carousel.target().css('width', '160%').animate({
            width: '100%'
        }, carousel.options('animation').duration * 1.5, function () {
            canSlide = true;
        });
    });

CSS:

.jcarousel-slide {
    background-clip: border-box;
    background-origin: padding-box;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: cover;
}

(Full project at JSFiddle)

The background position does not seem to matter, it still scales to upper-left corner.

Any idea how to accomplish this?

Answer 1

My solution is to set margin-left before animation then animate to margin-left 0

carousel.on('jcarousel:animate', function (event, carousel) {
  carousel.target().css('width', '160%').css('margin-left', -(carousel.target().width()/4)+'px').animate({
    width: '100%',
    marginLeft: '0'
  }, carousel.options('animation').duration * 1.5);
});

Perhaps there's a better way to solve this but this is what I have now.

Oh, and latest Fiddle (with this effect): JSFiddle.net