Я использую slick, чтобы сделать карусель следующим образом:

Я использовал эти настройки:

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

Это похоже на то, что реальная анимация работает нормально. Следующая часть (которая вызывает у меня проблемы) пытается получить " точка" и текст для анимации по размеру цвета. Кто-нибудь знает, как я могу это сделать? Я пытаюсь использовать метод салфетки, но проблема заключается в том, что это элемент, ближайший к центру, когда я прокручиваю.

Любая помощь будет принята с благодарностью.

---

Update

Так что мне удалось сделать часть этого. Я добавил обратный вызов 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 истинно, щелкните элемент, не изменяя его размер. Также использование навигационных стрелок не работает, и, наконец, когда вы отпускаете перетаскивание, когда он перемещается в центр, это также не изменяется.

Я надеялся переопределить метод animateSlide, чтобы вставить мой код, но мой код работает с текущей позицией, и я не думаю, что это будет работать с animateSlide.

Теперь я добавил щедрость, потому что, полагаю, кто-то может мне помочь.

Обновление 2

Я создал код, чтобы проиллюстрировать мою проблему.

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

Если вы перетащите влево или вправо, вы увидите, что "точка" увеличивается и уменьшается в размере. Но если вы нажмете любую точку, она просто движется прямо туда, не изменяя размер.

Я надеюсь, что это объяснит мою проблему:)