WordPress Tricks

WordPress simple text rotator

wordpress text rotatorOne 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>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s