How To Add Together A Tiny Jquery Circleslider To Blogger

Tiny Circleslider is a minor jQuery plugin generating a circular carousel of images that nosotros tin flaming slide infinitely (circular). When clicking on the reddish dot, the original motion painting moves to the left too to a greater extent than or less other laid of images volition slide out.

There is nil complicated close using this type of carousel, notwithstanding when it is close customizing it, nosotros take to work a fleck of arithmetic. All these details tin flaming locomote constitute inwards the author's homepage, too therefore I'll exactly restrict myself to demonstrate y'all the basics.

To run across it inwards action, delight see the below demo spider web log too exactly drag the reddish dot:

Tiny jQuery Circleslider Demo

Tiny Circleslider is a minor jQuery plugin generating a circular How to Add a Tiny jQuery Circleslider to Blogger

Adding the Tiny CircleSlider to a Blogger Blog

In companionship to arrive work, offset 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" too striking the "Edit HTML" button:

Step 3. Click anywhere on the code expanse too 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 complaint that if y'all already accept to a greater extent than or less other version of jQuery, y'all volition take to take the trace 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/AVvXsEjvKj5VxKohvuR9GK2NPgxkPKPBZ-WCtQctDHqf9MZnB9NMsE9y7qfVDeQFaZeze59kFb0d_PQanuyusMo9UHSv8UNYit-6pdmVmM3Gr9b9EmUFLKFDkqYdZZMtFSStPKwewJzwVr6uEi8T/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
}
#rotatescroll .thumb { /* the reddish circle that allows us to navigate */
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg65bYGmVoFrc5oJXCQdGwBCUenOunodAoLdxbS57Rrt0Ny1E2XoBAbn5z7gWEnQgW8d9QgZ6NzgZBdjfXNJ8E7pX-wvo3B7z3fkMGElJ0C3H74bumy2zGj40FIdxOCCq2dUM4V3MOYUGWf/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/AVvXsEhFfY0icQRQ8ORXpPDF_Jqg4WD0TWOT4U0Fidmbocz7dLDSnghLVdub6tZnqUR-jGe4ztNJuqUepuesNHzfm5UGY3YcTHyjT1OIh07OVRZtON8m79_ZOUpbqlpQN7ySsR-IeC1gTfPOZIfi/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 locomote 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 too 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 locomote added, separated past times commas:

snaptodots: false if y'all desire no dots to locomote shown when dragging them
hidedots: imitation if y'all 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, only become to "Layout" > click the "Add a Gadget link" > from the popup window, pick out "HTML/Javascript" too glue the code within the empty box.

Search This Blog

sf

How To Add Together A Tiny Jquery Circleslider To Blogger

Adding the Tiny CircleSlider to a Blogger Blog

Popular posts from this blog

Telekiller - A Tool Session Hijacking In Addition To Stealer Local Passcode Telegram Windows

Cameradar V2.1.0 - Hacks Its Mode Into Rtsp Videosurveillance Cameras

Efiguard - Disable Patchguard Together With Dse At Kicking Time