I am currently trying to incorporate a basic jquery slideshow plugin, but I seem to be encountering some difficulties. The documentation mentions the need to install 'grunt' and 'node dependencies', which is confusing to me as I am new to jquery. My goal is to utilize this plugin and enhance my understanding of jquery simultaneously.
To test its functionality using the provided 'example' setup in the documentation, I created a jsfiddle: https://github.com/wieringen/tinycircleslider
I would greatly appreciate any guidance on where I might be going wrong. It seems that the jquery function is not working properly and the CSS is also incorrect (the red circle is positioned incorrectly).
Thank you in advance for any assistance offered as I embark on expanding my knowledge of jquery.
HTML
<title>Tiny Circleslider: A lightweight cross browser circular carousel.</title>
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr3.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr2.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" /></a></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
CSS
#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#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(https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/bg-rotatescroll.png) no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .thumb { background:url(https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/bg-thumb.png) no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200; height: 100px; }
#rotatescroll .dot { background:url(https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/bg-dot.png) no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll .dot span { display: none; }
Jquery
$(document).ready(function()
{
$('#rotatescroll').tinycircleslider({ interval: true, dotsSnap: true });
});
jquery.tinycircleslider.js (https://github.com/wieringen/tinycircleslider/blob/master/lib/jquery.tinycircleslider.js)