One of my client asked to add a text rotator in her site. I searched for plugins for that but didn’t appropriate free plugins for that. At last i got a piece of jquery code which at last I used to make the work done.
The code has two (2) parts.
1. Jquery code which you can put either in your theme’s header.php or in theme option (if your theme provides option to add script)
2. The HTML and Text portion, which you can put in any portion of your site where you want to show the text rotator.
Here I am sharing you the code.
If you have any issue feel free to let me know in comments section or You can take my personal help in skype : om2000_cuet.
/***************** First Part Jquery code ***************** /
https://code.jquery.com/jquery-3.6.4.js
<script>
$(document).ready(function() {
var items = $(‘#rotate div’);
var currentItem = 0;
var nextItem = 1;
items.hide();
items.eq(currentItem).show();
setInterval(function() {
items.eq(currentItem).fadeOut(500, function() {
items.eq(nextItem).fadeIn(500);
currentItem = nextItem;
nextItem = (nextItem + 1) % items.length;
});
}, 2000);
});
</script>
/***************** Second Part HTML and Text ***************** /
<div id="rotate">
<div style="display: block; opacity: 0.90557;">
This is first text to rotate.
</div>
<div style="display: none;" class="red">
This is second text to rotate.
</div>
</div>