Jquery image rotate with slider handle

See more:

Javascript

jQuery

Hi I have a round circle slider in which there can be multiple images can be added, but I have added one image and I want to rotate the image when someone move the slider here is the reference
Slider Demo

Slider Jquery File
Tiny Circle Slider


I want when someone drag the slider with handle slider of pic movie left it should rotate according to slider handle.

<script type="text/javascript">
    jQuery(document).ready(function($)
    {
        $('#rotatescroll').tinycircleslider();
    });
</script>

#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px; pointer-events: none }
#rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll .overlay {background:url(http://www.impacticondemos.website/westpoint/wp-content/uploads/2016/11/scrollbg4.png) no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .thumb { background:url(http://www.impacticondemos.website/westpoint/wp-content/uploads/2016/11/thumb2.png) no-repeat 50% 50%; touch-action: none; -ms-touch-action: none; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200;  height: 100px; }

#rotatescroll .dot span { display: none; }

What I have tried:

I tried to change the Left element on Javascript code and put transform degree but its not working I am more of a PHP developer not Jquery kindly help me out guys.