Simple jQuery text slider

Today, I needed a small slider for my portfolio... And my first thought was, hell... why not just build it myself. So this is what I did. This slider just slides all h1's in a given tag, with a given speed per slide. That's it... nothing more & nothing less, but it does the trick.

Simple Slider

To start, we'll check the needed html:

<header>
        <h1 class="hide">Lorem ipsum dolor sit amet</h1>
        <h1 class="hide">consectetur adipisicing elit</h1>
        <h1 class="hide">Excepteur sint occaecat cupidatat non proident</h1>
        <h1 class="hide">Sed ut perspiciatis unde omnis iste natus error</h1>
</header>

As you can see, this is a simple header-tag which contains several h1's. These h1's need to slide. (You don't need to use a header-tag, you can use a div with an id as well.) The .hide class simply has the property display:none; in order to hide all elements that need to slide.

This is all the html the slider requires, as you can see it is pretty simple... After this we can start writing the jQuery. Let's start by creating a kick-ass function that initializes & contains the slider.

function BadassSlider(slider, time){}

Above you can see the main function of the slider. As you can see it's called BadassSlider (because it is abviously badass!) and it has 2 parameters. "slider" which is the html tag in which the slider should act (here this would be the header-tag), and "time" which is the time each slide should be shown. First of all we'll create a variable & add a function inside our slider to show the first slide. Because the first slide needs to be shown ASAP (all slides are currently hidden).

var fadeTime = Math.round(time/6);

function showFirstSlide(){
    slider.find('h1').first().fadeIn(fadeTime,function(){$(this).addClass('show');});
}

showFirstSlide();

The variable fadeTime is just a simple calculation to check how long the fading should take (i've just divided the time a slide is shown by 6). The function "showFirstSlide" looks for the first slide and shows this slide with the "fadeIn" function. When the fading is done, the class "show" is added in order to know which slide is currently shown. After that we'd want the first slide to be shown, so we call the function to show the first slide.

var timer = setInterval(function(){
    var current = slider.find('.show');
    current.fadeOut(fadeTime,function(){
        $(this).removeClass('show');
        var nextSlide = current.next();

        if(nextSlide.html()){
            nextSlide.fadeIn(fadeTime,function(){$(this).addClass('show');});
        }else{
            showFirstSlide();
        }
    });
},time);

Above code is actually quite simple as well. What we do is we start with creating a timer. This timer will repeat the actions once every certain amount of time (indicated by the variable called "time"). In this timer we define a variable "current" which looks for the slide that is currently shown (indicated by the "show"-class). Then the current slides gets faded out & when this fade is completed, we need to do a little check. Was this slide the last one or not? This can be checked by confirming if the next slide contains something or not. If not, we show the first slide again else we fade the new slide in.

To use the slider you can now simply do

BadassSlider($('header'),3500);

And there you have it, you just made your own jQuery slider... now go drink a cup of coffee! you earned it :)

The full slider code looks like this:

function BadassSlider(slider, time){
    var fadeTime = Math.round(time/6);
    function showFirstSlide(){
        slider.find('h1').first().fadeIn(fadeTime,function(){$(this).addClass('show');});
    }

    showFirstSlide();

    var timer = setInterval(function(){
        var current = slider.find('.show');
        current.fadeOut(fadeTime,function(){
            $(this).removeClass('show');
            var nextSlide = current.next();

            if(nextSlide.html()){
                nextSlide.fadeIn(fadeTime,function(){$(this).addClass('show');});
            }else{
                showFirstSlide();
            }
        });
    },time);
}