jQuery Text Rotator

Step 1: Include the jQuery library Make sure you have included the jQuery library in your HTML document. You can either download jQuery and host it locally or use a CDN (Content Delivery Network) to include it. Add the following line within the <head> section of your HTML document:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Step 2: HTML Markup Create the necessary HTML structure for your text rotator. It should include elements with the class "text-item" inside containers with the IDs "text-rotator", "text-rotator-mobile", and "text-rotator-modal". For example:

<div id="text-rotator">
     <div class="text-item">Text 1</div>
     <div class="text-item">Text 2</div>
     <div class="text-item">Text 3</div>
</div>

Repeat the same structure for the other two containers: "text-rotator-mobile" and "text-rotator-modal".

Step 3: JavaScript Code Add a <script> tag in your HTML document and include the following JavaScript code inside it:

<script>
jQuery(document).ready(function() {
// Show the first text-item on page load
jQuery('#text-rotator .text-item:first, #text-rotator-mobile .text-item:first, #text-rotator-modal .text-item:first').addClass('active');

// Add the hidden class to all the text-items except for the first one
jQuery('#text-rotator .text-item:not(:first), #text-rotator-mobile .text-item:not(:first), #text-rotator-modal .text-item:not(:first)').addClass('hidden');

var textRotator = setInterval(function() {
var currentTextItem = jQuery('#text-rotator .text-item.active, #text-rotator-mobile .text-item.active, #text-rotator-modal .text-item.active');
var nextTextItem = currentTextItem.next('.text-item');
if (nextTextItem.length === 0) {
nextTextItem = jQuery('#text-rotator .text-item:first, #text-rotator-mobile .text-item:first, #text-rotator-modal .text-item:first');
}
currentTextItem.removeClass('active').addClass('next');
nextTextItem.addClass('active');
setTimeout(function() {
currentTextItem.removeClass('next').addClass('hidden');
}, 600);

// Check if the current item is the last item
if (currentTextItem.is(':last-child')) {
// Switch back to the first item
jQuery('#text-rotator .text-item:first, #text-rotator-mobile .text-item:first, #text-rotator-modal .text-item:first').removeClass('hidden next').addClass('active');
}
}, 2000);
});
</script>

Step 4: CSS Styling You may want to add some CSS styles to control the appearance of the text rotator. Customize the styles as per your requirements. For example:

<style>
.text-item {
display: none;
}

.text-item.active {
display: block;
}

.text-item.hidden {
display: none;
}
</style>

Step 5: Test and Customize Save your HTML file and open it in a web browser. The text rotator should now be working. The texts will rotate every 2 seconds (2000 milliseconds) by default. You can modify the rotation interval and adjust the CSS styles as needed.

That's it! You have successfully implemented the provided jQuery code to create a text rotator on your web page.

Share this post