How To Add Together A Tiny Jquery Circleslider To Blogger

Tiny Circleslider is a pocket-sized jQuery plugin generating a circular carousel of images that nosotros tin laissez passer on the sack slide infinitely (circular). When clicking on the cherry dot, the principal motion painting moves to the left together with roughly other laid of images volition slide out.

There is nada complicated nigh using this type of carousel, nonetheless when it is nigh customizing it, nosotros take to utilisation a combat of arithmetic. All these details tin laissez passer on the sack hold upwards constitute inwards the author's homepage, then I'll exactly limit myself to demonstrate you lot the basics.

To run across it inwards action, delight see the below demo spider web log together with exactly drag the cherry dot:

Tiny jQuery Circleslider Demo

Tiny Circleslider is a pocket-sized jQuery plugin generating a circular How to Add a Tiny jQuery Circleslider to Blogger

Adding the Tiny CircleSlider to a Blogger Blog

In lodge to arrive work, start business is to add together the javascript jQuery library inwards the template:

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

Step 2. Go to "Template" together with hitting the "Edit HTML" button:

Step 3. Click anywhere on the code surface area together with search yesteryear using the CTRL + F keys for this tag:

</head>

Step 4. Just inwards a higher identify the </head> tag, add together the next scripts:

Please greenback that if you lot already accept roughly other version of jQuery, you lot volition take to take the draw inwards red.

Step 5. Now, let's add together the CSS styles inwards a higher identify 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 listing amongst the images */
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
}
#rotatescroll .overview li { /* each item of the listing */
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
}
#rotatescroll .overlay { /* the icon amongst the circle overlapping the listing */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlLplOZVcNWpvzn0bye9LcQXgRVP7AqbiQ89O5schiKsImYN8wYS5K0SzOREf8zBbakrtX2xKM3vbMhrEAklSgyir0It5y8uFPZ1_6ZR7jjOGa3qjbYvdtR7gzHjjOYRWrsadnwwYIty5c/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
}
#rotatescroll .thumb { /* the cherry circle that allows us to navigate */
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxP6dxSRgZ8qGfWWVT8gSwgiy5gH7WqYF-da38kM_-OLNkf8SJyrRd0o0pI4_KqXeIrJXlaVBL8Fzc_l8lAZx_MtC-RBcE0fGSbcaqTDPG3az2YH1vfXP6q8AWoq_QL8n4YJnCYsh9KqTn/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 seat of each icon */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBHSiUn9CAY3JbgngvwQtFUl1OKXAzI2My42HP7QVBQpmtnHJh5PX_tijBMGl9r68yCp16_U8D4g4L8AmEqItZRu4cEv6BbeU_QVxgKnRG0485TTVwG1RBAX1_yYuNT-kNa2AEROH2LCA8/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 bridge { /* are hidden yesteryear 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 yesteryear clicking the "Save Template" button

And here's the HTML that has to hold upwards added to where nosotros desire to display the carousel. To add together it within a post, click the "New post" clit on the left side of your dashboard together with glue the below code inwards 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: truthful
});
});
</script>

Adding HTML within a Blogger post

Replace the imageURL text amongst the URL of your images.

Some other options that could hold upwards added, separated yesteryear commas:

snaptodots: false if you lot desire no dots to hold upwards shown when dragging them
hidedots: fake if you lot desire to display the internal points (by default is true)
intervaltime - is the fourth dimension betwixt slides (by default 3500)
radius - defines the size of the circle (by default is 140)

To add together the Tiny jQuery Circleslider to your sidebar, but teach to "Layout" > click the "Add a Gadget link" > from the popup window, pick out "HTML/Javascript" together with glue the code within the empty box.

How To Add Together A Tiny Jquery Circleslider To Blogger

Adding the Tiny CircleSlider to a Blogger Blog

Related Posts

Comments

Formulir Kontak