Do you have experience in web development and a passion for writing articles? If so, you might want to contact us. Learn more » http://www.cqmi.fr/ comments on rencontre agriculteur rencontres agricoles.

How to make looping text slider with jQuery?

hints&tips

About this article: Posted in: Learned along the way
By: Blockcoder ( Admin ) / 20.08.2013
Stats: Comments Off / Views: 403
Tags: , , ,

Looping? What?

Yes, with JavaScript you can set a time interval which will loop for example a function within certain time interval you choose. You have seen any looping things (like texts or images..) while browsing cool websites? If you haven’t, check out my portfolio! Have you ever wondered how to make that happen? Well, I’ll tell you one way to do that. Are you ready?


JavaScript and looping

First things first: you can loop things with JavaScript by stating the “setInterval” function:

setInterval(function(){
    console.log("looped");
}, 2000);

I stated that console.log(“looped”); will happen again in every two seconds (2000ms). Inside the “setInterval” function you can write anything you like. And you can also change the interval time (now it is 2000 msecs).

If you are using the Firebug (which is the greatest gift that web developer can have), you can press F12 and check the “Console”.

Okay, now you understand how to loop with JavaScript. For now, we will need something (maybe a list of elements) that you want to change with the “setInterval” function. Let’s make one.


Make a list

I’ll make (example) list of elements below that I want to fade out and change with the “setInterval” function:

<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Okay, if you go to your web browser to check that code, now all of them is visible. No, you don’t want that. What we want is that the first list element is visible and the others are not. Let us magic some CSS.


The CSS you need

As I told you, we need to hide all other list elements but the first one. The magic:

#test li { list-style: none; margin-bottom: 0px; display: none; }
#test li:first-child { display: block; }

Aaand when you check that out (with your browser), only the first one is visible! Isn’t that cool?

Okay, now what? Well, let’s do the (jQuery)looping for that list.


Finally, let’s change the list elements with setInterval function

Take the “setInterval” function in front of you and look at that. Now, as you remenber, you can write anything you like inside the function and it will loop the code (that is inside) within every two seconds.

Okay, with jQuery, for every two seconds you want to “fadeOut” the first-child (visible one) of our (#test) unordered list. And, when you have faded out the first one, you want to make the second-child (second list element) visible. It’s that simple!

Let us check out the code:

setInterval(function(){
  //console.log("looped");
  $('#test li:first-child').fadeOut(420, "easeInCirc", function(){
    $(this).next('li').fadeIn(420, "easeInCirc").end().appendTo('#test');
  });
}, 2000);

Yeah fockers! That’s it! We can write jQuery code within a Javascript function. You can apply that with anything.