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'/>We would lack the CSS styles that we need to add above the </head> tag as well:
<script src="http://helplogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js"/>
<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/AVvXsEik1uwsEZVrZ_R20WqniFDaPT3Xniv5vOMRDID8SwLjhNL5GOfCGFZYA3IlnKqpGiLNTbGpC7IP92Fel44Tv3WH5e-NJI9IuyY6MJDsfYmTvNtjxqN-bQogb2AHdQ_vk9G6KEIu3MaRHSji/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/AVvXsEi5CDWBUjpQGo1bg4oZEBmvTH6QFe3pTzx9p00F6h2LJCv5JhGgRlGqbXMSez024XuabbfYl6DEkU0FBx0InQauHPwre0EdfEUeZZqVQDpxAH9y-_SO6MAGINyDDfqSnnpp-uRoxy1U_25h/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/AVvXsEhb5_IdHhyljHNTGfax6Wl0rJJ4hR_1J5spJnWmwB6h3LQkYzBX76BYGoZ41juiOqYJ_hqVhYfHAkJsD0LlzPo-jDWAGHEF7isA1w-3Kg-RmGkgIVTyFbb0HZLDxUFOfNiqtS678hDMBsY4/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 |
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)
Posts
