This time, I will introduce how to rotate and display list tag (li) elements in various shapes using the jQuery plugins jquery.roundabout.js and jquery.roundabout-shapes.js. It’s a fun guide for engineers, designers, and beginners interested in web development.
Recently, it has become common to introduce animations and rotation effects to make list displays on websites and applications more attractive. In this tutorial, I’ll introduce tools to easily implement such visually impactful effects.
By using jquery.roundabout.js and jquery.roundabout-shapes.js, you can rotate sliders using list tags and arrange them in various shapes. Let’s learn together, from basic settings to more advanced customizations!
Features of jQuery roundabout.js and roundabout-shapes.js
First, let’s briefly explain the features of jquery.roundabout.js and jquery.roundabout-shapes.js.
- Easy to create interactive lists:
jQuery roundabout.js is a plugin that rotates list elements (li) with animation. Regular lists can move in response to user interactions, allowing you to create more attractive and user-friendly UIs. - Supports various rotation shapes:
With jquery.roundabout-shapes.js, you can arrange list rotation shapes into circles, ellipses, spirals, and more. This allows you to create visually interesting movements, rather than just rotating. - Abundant options:
This plugin offers many options, allowing you to freely customize rotation speed, direction, easing effects (motion pacing), and more. It’s easy for beginners to set up, so feel free to try it!
Let’s use it: CSS settings for rotating list tags
First, let’s look at the CSS settings to style the rotating list tags.
The following CSS code is the CSS description for three different list tag elements (#sample1 ul, #sample1 ul li, #sample2 ul, #sample2 ul li, #sample3 ul, #sample3 ul li). Customize it as needed.
<style type="text/css" media="all">
<!--
body{
margin:0;
padding:0;
}
h1{
text-align:center;
font-size:18px;
font-weight:bold;
padding:10px 0;
line-height:1.4em;
text-align:center;
}
.clWrap{
width:800px;
margin:0 auto;
}
hr{
border:none;
border-bottom:solid 1px #333333;
}
#sample1{
padding:100px 0 120px 0;
}
#sample1 ul {
list-style: none;
padding: 0;
margin: 0 0 0px 150px;
width: 350px;
height: 100px;
}
#sample1 li {
height: 100px;
width: 100px;
text-align: center;
cursor: pointer;
}
#sample1 li img {
width: 100%;
}
#sample1 li.roundabout-in-focus {
cursor: default;
}
#sample2{
padding:20px 0;
}
#sample2 ul {
list-style: none;
padding: 0;
margin: 50px 0 20px 150px;
width: 450px;
height: 100px;
}
#sample2 li {
height: 100px;
width: 100px;
text-align: center;
cursor: pointer;
}
#sample2 li img {
width: 100%;
}
#sample2 li.roundabout-in-focus {
cursor: default;
}
#sample3{
padding:40px 0;
}
#sample3 ul {
list-style: none;
padding: 0;
margin: 50px 0 20px 150px;
width: 350px;
height: 250px;
}
#sample3 li {
height: 200px;
width: 100px;
text-align: center;
cursor: pointer;
}
#sample3 li img {
width: 100%;
}
#sample3 li.roundabout-in-focus {
cursor: default;
}
-->
</style>
This CSS helps prepare the list tags for styling and applying the rotation effect.
Let’s use it: Settings for jQuery roundabout.js and roundabout-shapes.js
Next, we will use jquery.roundabout.js and jquery.roundabout-shapes.js to add rotation effects to the list tags.
Load the necessary files jquery.min.js, jquery.roundabout.js, jquery.roundabout-shapes.js, and jquery.easing.1.3.js. Use $(list tag area).roundabout({options}) to set the options for the rotation area. I’ve set up three list tag areas (.sample1, .sample2, .sample3).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.roundabout.js"></script>
<script src="jquery.roundabout-shapes.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.sample1').roundabout({
btnNext: ".next",
btnPrev: ".prev",
autoplayDuration: 3000,
autoplayPauseOnHover: true,
btnStartAutoplay: ".start",
btnStopAutoplay: ".stop",
shape: "risingEssence",
});
$('.sample2').roundabout({
btnNext: ".next2",
btnPrev: ".prev2",
duration: 2000,
autoplayDuration: 3000,
autoplayPauseOnHover: true,
btnStartAutoplay: ".start2",
btnStopAutoplay: ".stop2",
shape: "flurry",
easing: 'easeOutElastic'
});
$('.sample3').roundabout({
btnNext: ".next3",
btnPrev: ".prev3",
duration: 1600,
autoplayDuration: 3000,
autoplayPauseOnHover: true,
btnStartAutoplay: ".start3",
btnStopAutoplay: ".stop3",
shape: "rollerCoaster",
easing: 'easeOutBounce'
});
});
</script>
With this script, the list tags on the page will rotate. Each list has a different setting, so they each have their unique movement. You can control the rotation using buttons, providing an interactive user experience.
Let’s use it: HTML structure to display rotating list tags
Finally, let’s set up the HTML structure. Use the following code to rotate the list elements. I prepared three different patterns.
We will use rotating images (i1.jpg ~ i5.jpg) and three image rotation areas (class=”sample1″, class=”sample2″, class=”sample3″).
<div class="clWrap">
<h1>Displaying list tag elements with various rotation methods</h1>
<div align="center" style="margin: 0 0 40px 0;">Click the numbers to rotate multiple images.</div>
<div id="sample1">
<ul class="sample1">
<li><a href="#"><img src="i1.jpg" alt="" /></a></li>
<li><a href="#"><img src="i2.jpg" alt="" /></a></li>
<li><a href="#"><img src="i3.jpg" alt="" /></a></li>
<li><a href="#"><img src="i4.jpg" alt="" /></a></li>
<li><a href="#"><img src="i5.jpg" alt="" /></a></li>
</ul>
</div>
<hr />
<div id="sample2">
<ul class="sample2">
<li><a href="#"><img src="i1.jpg" alt="" /></a></li>
<li><a href="#"><img src="i2.jpg" alt="" /></a></li>
<li><a href="#"><img src="i3.jpg" alt="" /></a></li>
<li><a href="#"><img src="i4.jpg" alt="" /></a></li>
<li><a href="#"><img src="i5.jpg" alt="" /></a></li>
</ul>
</div>
<hr />
<div id="sample3">
<ul class="sample3">
<li><a href="#"><img src="i1.jpg" alt="" /></a></li>
<li><a href="#"><img src="i2.jpg" alt="" /></a></li>
<li><a href="#"><img src="i3.jpg" alt="" /></a></li>
<li><a href="#"><img src="i4.jpg" alt="" /></a></li>
<li><a href="#"><img src="i5.jpg" alt="" /></a></li>
</ul>
</div>
</div><!--/clWrap-->
Using this HTML structure, the image list will rotate, offering a dynamic visual experience to users visiting your page. Each list is configured with different rotation settings, allowing for a variety of expressions.
Tips for further customization
While this plugin is designed to be easy to use, more advanced settings and applications are possible. Here are some customization ideas and examples:
- Adjusting rotation speed and direction:
By adjusting the rotation speed and direction, you can create different visual effects. For example, changing the values of duration or autoplayDuration can result in slower rotations or faster effects. - Customizing easing:
By utilizing the easing option, you can control the pacing of the movement. Using easings like easeOutBounce or easeOutElastic can add a unique flavor to your animations. This offers a more lively interaction experience. - Adding additional event triggers:
In addition to button controls, you can also set up events triggered by, for example, mouse hover or scrolling. This allows for dynamic effects that respond to user actions.
roundabout-shapes.js, roundabout.js: Demo page to display list tag elements with various types of rotation
To see the actual movements, we have prepared a demo page. Check out how the list elements rotate in various shapes from the following link.
Demo page for roundabout-shapes.js, roundabout.js
This demo uses the three sample codes introduced here, so feel free to copy and use them in your own projects.
Source credits:
FredHQ – Roundabout for jQuery by Fred LeBlanc
FredHQ – Roundabout Shapes for jQuery & Roundabout by Fred LeBlanc
Conclusion
How was it? We have explained in detail how to rotate list tag (li) elements using jquery.roundabout.js and jquery.roundabout-shapes.js. By using these plugins, you can add movement and interactivity to regular list displays.
We have provided plenty of sample code so that even beginners can easily implement it. Start with the basics, and once you’re comfortable, try out more advanced settings and customizations to create your own original movements.
If you have any questions or unclear points, feel free to let me know in the comments. See you next time!
*Please take responsibility when using this code. Do not reuse the Google Analytics tags within the demo page’s head tag.
