When visiting a website or blog, the first visual displayed on the screen greatly influences the visitor’s impression of that site. Attractive and interactive elements are key to capturing the interest of visitors and encouraging them to stay longer. In the world of web design, one rising star is the circular image slider, and in this article, we’ll explain how to implement it step-by-step.
This time, we’ll introduce a simple way to create a beautiful image slider that will catch the eye on your website or blog.
It’s called “jquery.tinycircleslider.js.” By using this tool, you can easily add a circular image slider to your site.
Why a Circular Slider?
Unlike traditional horizontal or vertical sliders, a circular slider not only brings a fresh visual appeal but also offers a new form of user interaction. This format is particularly effective for portfolio sites or product showcase pages, leaving a strong impression on visitors.
Step 1: Styling with CSS
Use CSS to style the slider and its components appropriately. In this step, you will set the slider size, image placement, and viewport settings.
The CSS code below (after the “/* Tiny Circleslider */” comment) is used with jquery.tinycircleslider.js to display multiple images in a circular slider layout.
<style>
body {
font-size: 16px;
text-align: center;
}
h1{
text-align: center;
font-size: 18px;
line-height: 1.6em;
padding-top: 20px;
}
p{
line-height: 1.6em;
}
img { border: 0; }
/* Tiny Circleslider */
#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px; pointer-events: none }
#rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0; left: 0; top: 0; }
#rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll .overlay {background:url(images/bg-rotatescroll.png) no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .thumb { background:url(images/bg-thumb.png) no-repeat 50% 50%; touch-action: none; -ms-touch-action: none; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200; height: 100px; }
#rotatescroll .dot { background:url(images/bg-dot.png) no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll .dot span { display: none; }
</style>
Step 2: Preparing the HTML
To embed the slider in a web page, you first need to prepare the HTML structure. Below is an example of a basic structure with three images.
Inside the display area for the circular multiple image slider (id=”rotatescroll”), place three slider images (1.jpg to 3.jpg).
<h1>Display multiple circular image sliders using jquery.tinycircleslider.js</h1>
<p>Hover over the green circle "●" and drag left or right while holding the right mouse button to slide the images.</p>
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><a href="/" target="_blank"><img src="images/1.jpg" width="300" /></a></li>
<li><a href="/" target="_blank"><img src="images/2.jpg" width="300" /></a></li>
<li><a href="/" target="_blank"><img src="images/3.jpg" width="300" /></a></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
Step 3: Adding Functionality with JavaScript
Finally, use jquery.tinycircleslider.js to bring the slider to life. This library allows for smooth animations and advanced customization.
Load the jquery.min.js, hammer.js, and jquery.tinycircleslider.js files. Then write $(‘circular multiple image slider area’).tinycircleslider({ options }). In the options, you can set automatic sliding, show/hide controllers, and more.
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tinycircleslider.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#rotatescroll').tinycircleslider({ interval: true, dotsSnap: true, dotsHide: false });
});
</script>
Demo Page: Controlling Multiple Circular Image Sliders with jquery.tinycircleslider.js
You can view a demo of the circular slider created using these steps from the link below. Customize it to suit your own project and add a unique interactive element to your website.
Demo Page: Controlling Multiple Circular Image Sliders with jquery.tinycircleslider.js
Source: Tiny Circleslider
Conclusion
A circular image slider is a fantastic way to bring unique visuals and interactions to your website. Use this article as a guide to create your own original slider and leave an unforgettable impression on your visitors.
*Please use at your own risk if reusing.
Do not reuse the Google Analytics tag in the head tag of the demo page.
