Click here to Skip to main content
15,747,059 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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">

#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( no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .thumb { background:url( 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.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900