How To Add Together A Tiny Jquery Circleslider To Blogger

Tiny Circleslider is a pocket-size jQuery plugin generating a circular carousel of images that nosotros tin slide infinitely (circular). When clicking on the blood-red dot, the chief motion painting moves to the left as well as around other laid of images volition slide out.

There is nil complicated nearly using this type of carousel, all the same when it is nearly customizing it, nosotros require to work a fleck of arithmetic. All these details tin endure establish inwards the author's homepage, then I'll precisely confine myself to demonstrate you lot the basics.

To come across it inwards action, delight see the below demo spider web log as well as precisely drag the blood-red dot:

Tiny jQuery Circleslider Demo

Tiny Circleslider is a pocket-size 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 larn inwards work, starting fourth dimension delineate of piece of work 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" as well as hitting the "Edit HTML" button:

Step 3. Click anywhere on the code expanse as well as search past times using the CTRL + F keys for this tag:

</head>

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

Please banking concern annotation that if you lot already bring around other version of jQuery, you lot volition require to take away the delineate inwards red.

Step 5. Now, let's add together the CSS styles to 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/AVvXsEicL5t5bmisF7_fVc8AbHRwHNszVaDPeQmNF1uQ0JqJA1_8mvu10IVllX0FzME492P60khMLdkA3M2NPLnnxeFkyWomEfM44A2RIw9GwYTEDue3B0IvYlPhqmbwkpCsehu-ZmRffZaZtbMD/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
}
#rotatescroll .thumb { /* the blood-red circle that allows us to navigate */
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtUN13rLhAB0ejTqHji1yngSWmrZaJskJmwkYKLfa6qXk_nKBrjUsCnGF9iWmvMmeEk7tbOp1jrKFuPVRSqJy0d-rS8cULHFH5v3Z9XAKhlRCY6XdqmHARSpwrprmASix4yVWbHVtAg2SA/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/AVvXsEhSCIzMTRoH51i_domHjwbXiB00BjnyYuBCMiOncE58sKaLS5IcQWEXvHRE0wnZNMCGovrh7hW1B4XInIkkYbcNLV8Y2PpRFcjXngAPOHyYqMygsvdCi96hf1LiKdAbac6UZGr9rh-tlNSj/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 past times 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 past times clicking the "Save Template" button

And here's the HTML that has to endure 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 as well as 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 endure added, separated past times commas:

snaptodots: false if you lot desire no dots to endure 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, precisely become to "Layout" > click the "Add a Gadget link" > from the popup window, select "HTML/Javascript" as well as 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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel