javascript - Slide content based on the speed of the mouse -

i have carousel type item:

http://codepen.io/r3plica/pen/xopzqk?editors=1111

what trying now, change it's behaviour. drag know speed of mouse , try mimic scroll speed. when let go of mouse want slider continue sliding slow down on period of time. first step trying actual speed of mouse, did this:

var eventhandler = function (e) {      var event = _options.event;     var timestamp = new date().gettime();     var touches = event.touches = e.originalevent !== undefined ? e.originalevent.touches : null;      if (e.type === 'mousedown') {          // assign timer our event         event.timer = $timeout(function () {              // if have not enabled event             if (!event.enabled) {                  // set our startx , time                 event.startx = touches ? touches[0].pagex : e.clientx;                 event.timestamp = timestamp;                  //console.log(event);                  // enable our drag                 event.enabled = true;             }         }, 100);     }      if (e.type === 'mousemove' && event.enabled) {          // our old position         var x = event.currentx;          //console.log(timestamp);         //console.log(event.timestamp);         //console.log('calc', timestamp - event.timestamp);          // update our current position , speed         event.currentx = touches ? touches[0].pagex : e.clientx;         event.distance = event.currentx - (x || event.startx);         event.time = timestamp - event.timestamp;         event.timestamp = timestamp;         event.speed = (event.distance / event.time) * $window.innerwidth;          //console.log('distance', event.distance);         //console.log('time in seconds', event.time);         //console.log('speed', event.speed);         //console.log('------');          // work out our offset         var offset = event.currentx / $window.innerwidth;          console.log(offset);          // if have not started         if (!event.started) {              // set our initial start position             event.xoffset = offset;              // initial our position             event.oldx = event.pagex;              // set started             event.started = true;         }          // udpate our position         event.pagex = (offset - event.xoffset) + event.oldx;          // set our new offset         event.xoffset = offset;          // update our element         _updatedragelement(_options.element, event);          // update our old position         event.oldx = event.pagex;     }      if (['mouseup', 'mouseout'].indexof(e.type) > -1) {          // clear our timer         $timeout.cancel(event.timer);          //console.log(event);          // if our data set         if (event.enabled) {              // unset             event.enabled = false;         }          // stop drag         event.start = false;     } } 

i break down events

mouse down

as can see eventhandler when mousedown event triggered, start position startx recorded along current timestamp.

mouse move

when mousemove event triggered check see if moving getting value in currentx. set currentx, distance travelled (current position minus last position or start position if there no current position.) work out time , record current timestamp , work out speed. xoffset dividing currentx width of window. if animation has not started set xoffset , set oldx current pagex , start animation. pagex worked out xoffset minus current xoffset plus oldx, update new xoffset. update element new transform , set oldx current pagex.

mouse up

for disable , stop animation.

problem

the problem have speed low, animation doesn't work well. decided multiple speed window width animation no better because jerks around. think doing calculations incorrectly hoping take , give me advice.

i checked codepen, calculation looks fine. transition property seems missing scrolling element, try giving transition property .pk-slider-base class.

.pk-slider .pk-slider-base {   -webkit-transition: 2s ease;   transition: 2s ease; } 

you can try adding transition using javascript in updateview().

please see below:

function updateview() {   "use strict";   finalx = pagex * myspeed;   console.log('x', pagex);   console.log('speed', myspeed);   yourtrans = 'translatex(' + finalx + 'px)';   yourelement.style.transform = yourtrans;   /*adding transition*/   yourelement.style.webkittransition = "all 2s";   yourelement.style.transition = "all 2s"; }