i using slick make carousel this:
i have used these settings:
{ dots: false, slidestoshow: 3, focusonselect: true, swipetoslide: true, centermode: true, event: { init: scope.init } } this seems actual animation working fine. next part (which bit causing me issues) trying "dot" , text animate in size colour. know how might go doing that? trying use swipe method issue working out item closest center swiping.
any appreciated.
update
so have managed part of this. added init callback options , added code work out position of center element , it's size.
// extend our scope angular.extend(scope, { init: function (e, slick) { // our dragable element var sizes = scope.options.sizes, draggableelement = element[0].getelementsbyclassname('draggable')[0], centerelement = draggableelement.getelementsbyclassname('slick-center')[0].childnodes[0]; // set active dimensions , 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 point var _resizepoint = function (slick, container, sizes) { // our actual width var containerpadding = parseint(container.style.paddingleft), containerwidth = container.offsetwidth - containerpadding * 2; // if have swipe left if (slick.swipeleft) { // our slide index var center = containerwidth / 2, left = -slick.swipeleft > 0 ? -slick.swipeleft : slick.swipeleft, distance = left + center, index = math.floor(distance / slick.slidewidth); // active element var activeelement = container.childnodes[0].childnodes[index].childnodes[0]; // our start point var half = slick.slidewidth / 2, start = center - half, position = (index * slick.slidewidth) - left; // our dimensions var startdimension = sizes.start, finishdimension = sizes.finish, startmargin = (finishdimension - startdimension) / 2 // percentage in relation 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 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'; } }; this works while dragging, when focusonselect true, click item not resize it. using navigational arrows doesn't work , when let go of drag, when moves center, doesn't resize either.
i hoping override animateslide method insert code, code works on current items position , don't think work animateslide.
i have added bounty now, because assume can me this.
update 2
i have created codepen illustrate issue.
http://codepen.io/r3plica/pen/vkpyxe?editors=1010
if drag left or right, can see "dot" increases , decreases in size. if click of dots moves straight there not size change.
i hope explains issue :)
check this codepane demo
here have made changes in css file , js file
in css file have added css properties animation , make bigger circle on current slide.
.slick-slider .slick-slide .slider-point { transition: 1s ease-in; } and in js file have removed of code , added callback of slick sliders based on event section in 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 after init 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 } }); }); }}; }]); 
Comments
Post a Comment