更新

Question

我正在使用slick制作这样的旋转木马：

我使用过这些设置：

{
    dots: false,
    slidesToShow: 3,
    focusOnSelect: true,
    swipeToSlide: true,
    centerMode: true,
    event: {
        init: scope.init
    }
}

这似乎让实际的动画工作得很好。下一部分（这有点导致我的问题）试图获得“点”和文本以大小为颜色设置动画。有谁知道我会怎么做呢？我正在尝试使用滑动方法，但问题是我正在滑动时哪个是距离中心最近的项目。

非常感谢任何帮助。

更新

所以我设法做了一部分。我将init回调添加到选项中，并添加了一些代码来计算中心元素的位置及其大小。

// Extend our scope
angular.extend(scope, {
    init: function (e, slick) {

        // Get our dragable element
        var sizes = scope.options.sizes,
            draggableElement = element[0].getElementsByClassName('draggable')[0],
            centerElement = draggableElement.getElementsByClassName('slick-center')[0].childNodes[0];

        // Set the active dimensions and margins
        centerElement.style.width = sizes.finish + 'px';
        centerElement.style.height = sizes.finish + 'px';
        centerElement.style.borderRadius = sizes.finish / 2 + 'px';
        centerElement.style.marginTop = '0';
        centerElement.style.marginBottom = '0';

        slick.$list.on('touchmove.slick mousemove.slick', function () {
            _resizePoint(slick, this, sizes);
        });
    }
});

// Extend our options
angular.extend(scope.options, {
    event: {
        init: scope.init
    },
    sizes: {
        start: 18,
        finish: 50
    }
});


// Resizes the point
var _resizePoint = function (slick, container, sizes) {

    // Get our actual Width
    var containerPadding = parseInt(container.style.paddingLeft),
        containerWidth = container.offsetWidth - containerPadding * 2;

    // If we have a swipe left
    if (slick.swipeLeft) {

        // Get our slide index
        var center = containerWidth / 2,
            left = -slick.swipeLeft > 0 ? -slick.swipeLeft : slick.swipeLeft,
            distance = left + center,
            index = Math.floor(distance / slick.slideWidth);

        // Get the active element
        var activeElement = container.childNodes[0].childNodes[index].childNodes[0];

        // Get our start point
        var half = slick.slideWidth / 2,
            start = center - half,
            position = (index * slick.slideWidth) - left;

        // Get our dimensions 
        var startDimension = sizes.start,
            finishDimension = sizes.finish,
            startMargin = (finishDimension - startDimension) / 2

        // Get the percentage in relation to the center
        var percent = (center - position) / half,
            directionalPercent = position > start ? percent : 2 - percent,
            dimension = startMargin + ((finishDimension - startMargin) * directionalPercent),
            marginPercent = 1 - directionalPercent,
            margin = startMargin * marginPercent;

        // Apply our sizes to our element
        activeElement.style.width = dimension + 'px';
        activeElement.style.height = dimension + 'px';
        activeElement.style.borderRadius = dimension / 2 + 'px';
        activeElement.style.marginTop = margin + 'px';
        activeElement.style.marginBottom = margin + 'px';
    }
};

这在拖动时有效，但当 focusOnSelect 为true时，单击某个项目不会调整其大小。同样使用导航箭头不起作用，最后当你放开拖动时，当它移动到中心时，也不会调整大小。

我希望覆盖 animateSlide 方法来插入我的代码，但我的代码适用于当前项目位置，我认为这不适用于 animateSlide

我现在已经添加了赏金，因为我认为有人可以帮助我。

更新2

我已经创建了一个codepen来说明我的问题。

http://codepen.io/r3plica/pen/vKPyxE?editors=1010

如果向左或向右拖动，可以看到“点”的大小增加和减少。但是如果你点击任何一个点，它就会直接移动而不会改变尺寸。

我希望这可以解释我的问题：）

Answer 1

检查this codepane demo

这里我对CSS文件和JS文件进行了更改

在CSS文件中，我添加了动画的CSS属性，并在当前幻灯片上制作了更大的圆圈。

.slick-slider .slick-slide .slider-point
{
  transition:  1s ease-in;
}

在JS文件中，我删除了一些代码，并根据documentation中的事件部分添加了光滑滑块的回调

angular.module('slick', ['slickCarousel']).controller('MainController', function() {
    var self = this;
    self.items = [1, 2, 3, 4, 5];
}).directive('pkSlider', ['$timeout', function($timeout){
return {
    restrict: 'A',

    scope: {
        items: '=pkSlider',
        options: '='
    },

    templateUrl: 'assets/templates/pk-slider.html',

    link: function(scope, element){

        $timeout(function(){
            // Extend our options
            angular.extend(scope.options, {
                event: {
                // init: scope.init,
                init: function(event, slick){
                    // let's do this after we init the banner slider
                    sizes=slick.options.sizes;
                    var margin=(sizes.finish-sizes.start)/2;
                    $(slick.$slides[slick.initials.currentSlide]).find('.slider-point').css({
                        width: sizes.finish + 'px',
                        height: sizes.finish + 'px',
                        borderRadius: sizes.finish / 2 + 'px',
                        marginTop: '0',
                        marginBottom: '0'
                    });    
                },
                beforeChange: function(event, slick, currentSlide, nextSlide){

                    sizes=slick.options.sizes;

                    var margin=(sizes.finish-sizes.start)/2;

                    $(slick.$slides[currentSlide]).find('.slider-point').css({
                        width: sizes.start + 'px',
                        height: sizes.start + 'px',
                        borderRadius: sizes.start / 2 + 'px',
                        marginTop: margin+'px',
                        marginBottom: margin+'px'
                    });

                    $(slick.$slides[nextSlide]).find('.slider-point').css({
                        width: sizes.finish + 'px',
                        height: sizes.finish + 'px',
                        borderRadius: sizes.finish / 2 + 'px',
                        marginTop: '0',
                        marginBottom: '0'
                    })
                }
            },
            sizes: {
            start: 18,
            finish: 50
            }
        });
    });
}};
}]);

Answer 2

您可以利用CSS3 scale()转换将泡泡的大小增加到您想要的大小（当然直接将样式应用于.slick-center类）：

.slick-slide.slick-center .slider-point {
  -webkit-transform: scale( 2.5 );
     -moz-transform: scale( 2.5 );
       -o-transform: scale( 2.5 );
      -ms-transform: scale( 2.5 );
          transform: scale( 2.5 );
}

演示：http://codepen.io/andresilich/pen/jAREmO

移动经过中心时，光滑的动画

更新

更新2

2 个答案: