Слайк анимация при движении по центру

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

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

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

Update

Так что мне удалось сделать часть этого. Я добавил обратный вызов init к параметрам и добавил некоторый код для определения положения элемента центра и его размера.

Это работает при перетаскивании, но когда focusOnSelect истинно, щелкните элемент, не изменяя его размер. Также использование навигационных стрелок не работает, и, наконец, когда вы отпускаете перетаскивание, когда он перемещается в центр, это также не изменяется.

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

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

Обновление 2

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

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

Ответы

Ответ 1

Отметьте это демо-версия codepane

Здесь я внесли изменения в файл CSS и JS файл

В файле CSS я добавил свойства CSS для анимации и увеличил круг на текущем слайде.

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

И в JS файле я удалил часть вашего кода и добавил обратный вызов слайков на основе раздела Event в документации

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

Ответ 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