Text Slider

Running Example:

PHP is a server side language.

JQUERY is a client side language.

CSS is used for styling attribute to be called at once.

MYSQL is used for storing the database.

Here I am describing, how to used Text slider:

First we need to define style:

  .h1_title 

{ font-size: 20px;line-height: 22px;font-family: 'Patua One', cursive;font-weight: normal; text-transform: uppercase; letter-spacing: 4px; color:#e7decf;text-align:center; width:50%;padding-top: 25px;display:none; }

HTML to be define:

<div class="textslider">

<input type="hidden" id="h1countvalue" name="h1countvalue" value="1"/>

<h1 class="h1_title" id="h1_title1" style="display:block;">WE OFFER OUR CLIENT EXPERT LEGAL ADVICE<br>ALWAYS PROTECT CLIENTS INTERESTS</h1>

<h1 class="h1_title" id="h1_title2">WE OFFER OUR CLIENT EXPERT LEGAL ADVICE<br>ALWAYS PROTECT CLIENTS INTERESTS</h1>

<h1 class="h1_title" id="h1_title3">WE OFFER OUR CLIENT EXPERT LEGAL ADVICE<br>ALWAYS PROTECT CLIENTS INTERESTS</h1>

<h1 class="h1_title" id="h1_title4">WE OFFER OUR CLIENT EXPERT LEGAL ADVICE<br>ALWAYS PROTECT CLIENTS INTERESTS</h1>

</div>

Follwing is the Javascript function:

function changeh1()

{

var h1count = $('#h1countvalue').val();

var totalh1 = 4;   // define how much h1 we need to show on slider

if(h1count<totalh1) { h1count = Number(h1count)+1; } else { h1count=1; }

$('.h1_title').css('display','none');

$('.h1_title').fadeOut('fast');

$('#h1_title'+h1count).fadeIn('slow');

$('#h1countvalue').val(h1count);

}

Now we need to call function as a regular Internal:

setInterval(function(){changeh1()},5000);   // 5000 is equal to 5 Second, It is defined on Miliseconds.