Javascript 当移动经过中心时，滑动动画

我用它制作一个旋转木马，像这样：

我使用了以下设置：

{
    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 我创建了一个代码笔来说明我的问题

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

我希望这能解释我的问题：）

检查

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

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

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

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

---

您可以利用CSS3转换将气泡的大小增加到您想要的大小（当然，将样式直接应用到

.slick center

类）：

---

演示：

我不确定我是否完全理解这个问题，您能否澄清“尝试使点和文本在大小和颜色上动画化”是什么意思？因此它们看起来像我附加的git.git=gif。我想这意味着你帮不上忙？@r3plica，你能提供一个当前工作版本的jsfiddle吗？我是Dekel的，如果我们能看到一个功能性的演示会有很大帮助。我知道你做了什么，但这不是我想要的。当一个点滚动到屏幕中央时，它的大小和颜色也需要动画。我已经修改了代码，我希望它能符合您的要求…@r3plia，我已经修改了slider initialize Configuration中传递的回调事件的代码，javascript代码。@r3plia，Haresh已经为一个so问题做了足够多的工作，您需要的是自定义JS开发，因为您选择的库在元素通过中心时不会添加任何类。。。只有当滑动停止时，一个类才会被添加到活动的幻灯片中心，在此之前，对其应用任何样式都不容易…@r3plica，我理解您的担忧，但目前您已经更新了codepan（）中的代码，这与您之前提供和询问的解决方案非常不同。因为Codepan不能像fiddle一样为每个修订生成不同的url。我在代码上做了很多不同，而不是CSS转换。与事件回调集成一样。与Haresh相同，这适用于.slick中心，但不适用于经过中心的每个点。无论单击还是拖动，经过中心的每个点都应具有动画。如果屏幕上有9个点，则单击距离最远的do。通过中心的每个点都应该在通过时在大小和颜色上设置动画。@Andres，您的解决方案非常有趣，可以将当前点缩放2.5倍，我将提供与您相同的解决方案，但我在代码中看到，圆的尺寸是可配置的

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
            }
        });
    });
}};
}]);

.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 );
}