jCarousel應該將幻燈片放大到中心底部

Question

我喜歡滑塊/旋轉木馬on this site，所以我試圖複製它。

我的問題是與縮放，我不能讓它以同樣的方式放大。

我想要的是它可以像示例網站上那樣擴展到中心底部。

這是我到目前爲止有：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; 
} 

（在JSFiddle全部項目）

背景位置不似乎很重要，它sti會縮放到左上角。

任何想法如何做到這一點？

Answer 1

我的解決辦法是設置利潤率左動畫之前然後動畫保證金左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); 
}); 

也許有解決這個更好的方法，但是這是我現在有。

哦，最新的小提琴（有這個效果）：JSFiddle.net