How to Add a Tiny jQuery Circleslider to Blogger

Tiny Circleslider is a small jQuery plugin that generates a circular carousel of images.

There is noting complicated about using this type of carousel, however when it's about customizing it, it's necessary to use a bit of arithmetic. All these details can be found in the author's homepage, so I'll just limit myself to show you the basics.

Obviously, we need to add the javascript jQuery library in our template:

Step 1. From your Blogger's dashboard, go to Template > press the Edit HTML button

Step 2. Search for the </head> (CTRL + F) tag and just above it, add the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src="http://helplogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js"/>

We would lack the CSS styles that we need to add above the </head> tag as well:

<style>
#rotatescroll { /* is the rectangle container */
    height: 300px;
    position: relative;
    width: 300px;
}
#rotatescroll .viewport { /* is the rectangle containing the images */
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px
}
#rotatescroll .overview { /* is the list with the images */
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
}
#rotatescroll .overview li { /* each item of the list */
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
}
#rotatescroll .overlay { /* the image with the circle overlapping the list */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ_WXsegH4l71DO_6b2uTUePKBUQKNioqeDP8CCmgKSjKXxaOfGzuuCNSELJb-zNZdbnOZG1WgiikYbTqItPvwJdTcB_b4Hplr51uoTkbuunlNa_EcPCw2-OoN8Vj2eIYIVPk3UEwvON-_/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
}
#rotatescroll .thumb { /* the red circle that allows us to navigate */
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-sK1SluDoBM2NnWcDGdogOMLdSnngGmFMfAbBQXPlM6c6p3P8HZossi_ajnma5VY70F0Ad1lliKderaVdfHMRZyTx0z8qbLy_VcZMS28uvvm0bjVWvmlIuTMbfoeomkK8U1RLtWi3ysA2/s1600/bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
}
#rotatescroll .dot { /* the points indicating the position of each image */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFAxfZbjts22llTf8GdLzC0SVDQUErueKUsF8x1W5-SbdCw7HYBmwp48W80q4quoevD_MOT4EXCQM4S0P9XtyroPbS5gkwtb9Us7w1MYywTcrTDKDz4qLfl2ffnE7tzT0BStAJSojEWIp/s1600/bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
}
#rotatescroll .dot span { /* are hidden by default */
    display: none;
}
</style>

Screenshot

Step 3. Now here's the HTML that has to be added to where we want to display the carousel.
Create a New post and paste on the HTML section, the code below:

<div id="rotatescroll">
<div class="viewport">
    <ul class="overview">
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
    </ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>

<script type="text/javascript">
$(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
</script>

Screenshot

Note: replace the imageURL text with the URL of your images

and here are other options that could be added, separated by commas:

snaptodots - false if you want no dots to be shown when dragging them
hidedots - false if you want to display the internal points (by default is true)
intervaltime - is the time between slides (by default 3500)
radius - defines the size of the circle (by default is 140)