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处的完整项目）

背景位置似乎并不重要，它仍然会缩放到左上角。

知道怎么做到这一点吗？

Answer 1

我的解决方案是在动画之前设置margin-left然后设置为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);
});

也许有更好的方法来解决这个问题，但这就是我现在所拥有的。

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

jCarousel应将幻灯片放大到中间底部

1 个答案: