GSAP (draggable-Rotation) с подвязкой слайдера

gsap.js

  var wheel = Draggable.create('#nerdwheel-svg', {
      type: "rotation",
      bounds:{minRotation:0, maxRotation:360},
      throwProps: true,
      edgeResistance: 1,
      onDrag: nextHandler
      // function() {
      //   calcPercent(this.rotation);

      // }
    });

function dragActive() {
  var rot = wheel[0].rotation / 360
  var decimal = rot % 1
  var sliderLength = $('#wheel li').length
  var tempIndex = Math.round(sliderLength * decimal)
  var index

  if (rot < 0) {
    index = Math.abs(tempIndex)
  } else {
    index = sliderLength - tempIndex
  }

  if (decimal === 0) {
    index = 0
  }
  

  $('#wheel li.active').removeClass('active')
  $($('#wheel li')[index]).addClass('active')

}

// Tween rotation
function rotateDraggable(deg, callback) {
  var rot = wheel[0].rotation
  var tl = new TimelineMax()

  tl
    .to('#wheel', .5, {
      onComplete: function() {
        callback()
      }
    });

  wheel[0].rotation = rot + deg
}

// Handlers
function nextHandler() {
  var current = $('#wheel li.active')
  var item = current + 1
  if (item > $('#wheel li').length) {
    item = 1
  }
  rotateDraggable(360/$('#wheel li').length, dragActive);
}

function prevHandler() {
  var current = $('#wheel li.active')
  var item = current - 1
  if (item > 1) {
    item = $('#wheel li').length
  }
  rotateDraggable(-360/$('#wheel li').length, dragActive);
}

$('.next').on('click', nextHandler);
$('.prev').on('click', prevHandler);


    function calcPercent(angle) {
      percent = Math.round(angle / 360 * 100);
      spinnerVal.text(percent);
        // if(percent < 20){$('img.persone').attr('src', 'team/ellie.png'); }
        // switch (spinnerVal.text()) {  
        //   case '20':
        //     $('img.persone').attr('src', 'team/johan.png');
        //     playAudio(); 
        //     break;
        //   case '40':
        //     $('img.persone').attr('src', 'team/marli.png');
        //     playAudio();
        //     break;
        //   case '60':
        //     $('img.persone').attr('src', 'team/rene.png');
        //     playAudio();
        //     break;
        //   case '80':
        //     $('img.persone').attr('src', 'team/rutger2.png');
        //     playAudio();
        //     break;

        // }
    }

////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
/*    function tweenCalc(){
     calcPercent (Draggable.get(".circle").target._gsTransform.rotation);
    }
    $('.submit').on('click', function() {
    TweenLite.to( $('.circle'), 1,{rotation:90,onUpdate:tweenCalc});
    });*/
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
 

main.js

var wheel = Draggable.create('#nerdwheel-svg', {
    type: "rotation",
    bounds: { minRotation: 0, maxRotation: 360 },
    throwProps: true,
    edgeResistance: 1,
    onDrag: dragActive
    // function() {
    //   calcPercent(this.rotation);

    // }
});

function dragActive() {
    var rot = wheel[0].rotation / 360
    var decimal = rot % 1
    var sliderLength = $('#wheel li').length
    var tempIndex = Math.round(sliderLength * decimal)
    var index

    if (rot < 0) {
        index = Math.abs(tempIndex)
    } else {
        index = sliderLength - tempIndex
    }

    if (decimal === 0) {
        index = 0
    }


    $('#wheel li.active').removeClass('active')
    $($('#wheel li')[index]).addClass('active')

}



// // Tween rotation
// function rotateDraggable(deg, callback) {
//   var rot = wheel[0].rotation
//   var tl = new TimelineMax()

//   tl
//     .to('#wheel', .5, {
//       onComplete: function() {
//         callback();
//       }
//     });

//   wheel[0].rotation = rot + deg
// }

// // Handlers
// function nextHandler() {
//   var current = $('#wheel li.active')
//   var item = current + 1
//   if (item > $('#wheel li').length) {
//     item = 1
//   }
//   rotateDraggable(360/$('#wheel li').length, dragActive);
// }

// function prevHandler() {
//   var current = $('#wheel li.active')
//   var item = current - 1
//   if (item > 1) {
//     item = $('#wheel li').length
//   }

//   rotateDraggable(-360/$('#wheel li').length, dragActive);
// }

// $('.next').on('click', nextHandler);
// $('.prev').on('click', prevHandler);


function playAudio(){
var myAudio = new Audio;
  myAudio.src = "click-sound.ogg";
  myAudio.play();
}

    function calcPercent(angle) {
      percent = Math.round(angle / 360 * 100);
      spinnerVal.text(percent);
        // if(percent < 20){$('img.persone').attr('src', 'team/ellie.png'); }
        // switch (spinnerVal.text()) {  
        //   case '20':
        //     $('img.persone').attr('src', 'team/johan.png');
        //     playAudio(); 
        //     break;
        //   case '40':
        //     $('img.persone').attr('src', 'team/marli.png');
        //     playAudio();
        //     break;
        //   case '60':
        //     $('img.persone').attr('src', 'team/rene.png');
        //     playAudio();
        //     break;
        //   case '80':
        //     $('img.persone').attr('src', 'team/rutger2.png');
        //     playAudio();
        //     break;

        // }
    }

////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
/*    function tweenCalc(){
     calcPercent (Draggable.get(".circle").target._gsTransform.rotation);
    }
    $('.submit').on('click', function() {
    TweenLite.to( $('.circle'), 1,{rotation:90,onUpdate:tweenCalc});
    });*/
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////