How to Add a Tiny jQuery Circleslider to Blogger

Monday, October 28, 2013

How to Add a Tiny jQuery Circleslider to Blogger - Hallo TRENDING NEWS, In the article that you are reading this time with the title How to Add a Tiny jQuery Circleslider to Blogger, we have prepared this article well for you to read and take the information in it. hopefully the contents of the post Article Blog Design, Article css, Article jQuery, what we write you can understand. all right, have a nice reading.

Title : How to Add a Tiny jQuery Circleslider to Blogger
link : How to Add a Tiny jQuery Circleslider to Blogger

How to Add a Tiny jQuery Circleslider to Blogger

Tiny Circleslider is a small jQuery plugin generating a circular carousel of images that we can slide infinitely (circular). When clicking on the red dot, the main picture moves to the left and another set of images will slide out.

There is nothing complicated about using this type of carousel, however when it is about customizing it, we need 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.

To see it in action, please visit the below demo blog and just drag the red dot:

Tiny jQuery Circleslider Demo

Adding the Tiny CircleSlider to a Blogger Blog

In order to make it work, first task is to add the javascript jQuery library in the template:

Step 1. Log in to your Blogger account > select your blog

Step 2. Go to "Template" and hit the "Edit HTML" button:

Step 3. Click anywhere on the code area and search by using the CTRL + F keys for this tag:

</head>

Step 4. Just above the </head> tag, add the following scripts:

Please note that if you already have another version of jQuery, you will need to remove the line in red.

Step 5. Now, let's add the CSS styles above the same </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/AVvXsEiKfjVabBlTV50wAZNfR93HC_qpRPjU_BxIQvaqEcvOCQQG8ptknU8TzGgXGDiMOrTJ_-2bAZP5w8O4UEXrqEiM911-izZzEZ4eEjyJOHzV-XYBfSRO_gOlHg_h9gAmh46VjEsM3V6iT2q_/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/AVvXsEiyHBPGM3T1vpRH7Fbm9aQhWhyphenhyphenzBMN5g86Kx4aQDA4UMlcHMUY7ElpG9xx0YF5GVw9xQcOlOi38C4JSNXKO_vHQ3eqFECnCVszOgsN8hVclUhUms4Qa8ye0I3v-IYV8b4gFApB5-CQRwIyc/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/AVvXsEgz9FyktfezXMSKlkBC5rhjQ5ZJFwtgfqOW_y148S2zNsSKgdLCMrcolCy9ry0V-j8xkH_J5pNm3JoAjGwDQ-rZA32P32BD9XIpyOFAiipRVXNStG5FMtLwwdNRWA18FpoHTrkDq6gKc_TL/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;
}
#rotatescroll .viewport ul.overview li img {
   width: 300px;
   min-height: 300px;
   object-fit: cover;
   padding:0;
   border:0;
}
</style>

Screenshot

Step 6. Save the changes by clicking the "Save Template" button

And here's the HTML that has to be added to where we want to display the carousel. To add it inside a post, click the "New post" button on the left side of your dashboard and paste the below code in the "HTML" box of your post:

<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({
interval: true,
snaptodots: true
});
});
</script>

Adding HTML inside a Blogger post

Replace the imageURL text with the URL of your images.

Some 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)

To add the Tiny jQuery Circleslider to your sidebar, simply go to "Layout" > click the "Add a Gadget link" > from the popup window, choose "HTML/Javascript" and paste the code inside the empty box.

Thus the article How to Add a Tiny jQuery Circleslider to Blogger

That's the article How to Add a Tiny jQuery Circleslider to Blogger this time, hopefully it can be of benefit to all of you. well, see you in another article post.

You are now reading the article How to Add a Tiny jQuery Circleslider to Blogger with the link address https://poccoll.blogspot.com/2013/10/how-to-add-tiny-jquery-circleslider-to.html