Awesome Tiny JQuery Circle Image Slider For Blogger

Views:

Hello, Everybody.. In this post i share a valuable information about a beautiful slider. Normally we use blogger default image slider. It is automatically changed images or we can use forward and reverse button to see images. But now i share an important image slider. I think you never see this type image slider before. This is a beautiful image slider, But it not work like default image slider. It is working with movement of mouse with circle path. This widget have a rounded point. When we want to see next image, just hold mouse pointer on red point and move around circle path. This movement like an old telephone dialling. This is a awesome blogger widget. If you want to add this widget on your blogger. Keep follow this post..

LIVE DEMO

First Log in your Blogger account.

Select Template option.

Click on Edit HTML.

Then Find (CTRL+F) </head> tag.

Copy and paste below JavaScript code before </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src="https://googledrive.com/host/0B7zn8HT9f1BUcFNHcS10MF9Oa3M"/>

Then Copy below CSS code and paste it before </head> tag.

<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/AVvXsEjdibBVWiBJW3gmDIuEj3DFXuXHDMMUNbrryq0ZX-qofB5WgWlnwjsDzX6nau2D3G15x0YDpfzGQgX9G-09tKqMdfWOUd1-7GP5gH9DIsbnEKkhdzRcA9imeC6JptK4kcNa72RIqMjbEuOf/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/AVvXsEgNtBelDqwZbYIZtVvFDZWJfmZVYc7KdgjCn1b1BDD6ZpJTIRlxtJmW-vt9-yATBpWaxzHK34SG1H-dZtAqdoBfNnTpRMxgWCEd38R1BLI5kmN-PREVTa87h0OXkk3uG2-968MhorZNO2mm/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/AVvXsEi9I14mKHw6C2qBDHBm-e9JuIOMlcvMTXUlNrtnHZMXBOxYl0KlkymL_u-nrswlkjI39KVx8U2BGHteFXFjsPh1tmVFZxeaJnKAcYpZCM4suYRrAdlDb_oQY6MT5QBUqYhX2dZt3BJrSUbV/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>

Save your Template.

Then go to Layout option.

Click on Add Gadget option.

Select HTML/JavaScript from given list.

Copy below code and paste it on HTML/JavaScript box.

<div id="rotatescroll">
<div class="viewport">
    <ul class="overview">
      <li><img src=" IMAGE-URL" /></li>
      <li><img src=" IMAGE-URL" /></li>
      <li><img src=" IMAGE-URL" /></li>
      <li><img src=" IMAGE-URL" /></li>
      <li><img src=" IMAGE-URL" /></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>