Creating a Automatic Content Slider

Hi guys!

I’m creating a content slider, and it works as expected, however I don’t know how to make it automatic. I want it to start working when the page is loaded.

$(document).ready(function(){

    // Image Variables
    var slide0 = $('#slide_0'),
        slide1 = $('#slide_1').hide(),
        slide2 = $('#slide_2').hide(),
        slide3 = $('#slide_3').hide(),
        slide4 = $('#slide_4').hide(),
        slide5 = $('#slide_5').hide();
        slide6 = $('#slide_6').hide();

    // Thumb Variables
    var thumb0 = $('#thumb_0'),
        thumb1 = $('#thumb_1'),
        thumb2 = $('#thumb_2'),
        thumb3 = $('#thumb_3'),
        thumb4 = $('#thumb_4'),
        thumb5 = $('#thumb_5');
        thumb6 = $('#thumb_6');

    // Text Variables
    var text0 = $('#text_0'),
        text1 = $('#text_1').hide(),
        text2 = $('#text_2').hide(),
        text3 = $('#text_3').hide(),
        text4 = $('#text_4').hide(),
        text5 = $('#text_5').hide();
        text6 = $('#text_6').hide();

    // When thumb 0 is clicked
    thumb0.click(function(e) {
        slide0.fadeIn(),
        slide1.hide(),
        slide2.hide(),
        slide3.hide(),
        slide4.hide(),
        slide5.hide(),
        text0.fadeIn(),
        text1.hide(),
        text2.hide(),
        text3.hide(),
        text4.hide(),
        text5.hide();
        thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb0.toggleClass("slider_thumb_select"),
        thumb1.toggleClass("slider_thumb_unlect"),
        thumb2.toggleClass("slider_thumb_unlect"),
        thumb3.toggleClass("slider_thumb_unlect"),
        thumb4.toggleClass("slider_thumb_unlect"),
        thumb5.toggleClass("slider_thumb_unlect"),
    e.preventDefault();
    });

    // When thumb 1 is clicked
    thumb1.click(function(e) {
        slide0.hide(),
        slide1.fadeIn(),
        slide2.hide(),
        slide3.hide(),
        slide4.hide(),
        slide5.hide(),
        text0.hide(),
        text1.fadeIn(),
        text2.hide(),
        text3.hide(),
        text4.hide(),
        text5.hide();
        thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb0.toggleClass("slider_thumb_unlect"),
        thumb1.toggleClass("slider_thumb_select"),
        thumb2.toggleClass("slider_thumb_unlect"),
        thumb3.toggleClass("slider_thumb_unlect"),
        thumb4.toggleClass("slider_thumb_unlect"),
        thumb5.toggleClass("slider_thumb_unlect"),
    e.preventDefault();
    });

    // When thumb 2 is clicked
    thumb2.click(function(e) {
        slide0.hide(),
        slide1.hide(),
        slide2.fadeIn(),
        slide3.hide(),
        slide4.hide(),
        slide5.hide(),
        text0.hide(),
        text1.hide(),
        text2.fadeIn(),
        text3.hide(),
        text4.hide(),
        text5.hide();
        thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb0.toggleClass("slider_thumb_unlect"),
        thumb1.toggleClass("slider_thumb_unlect"),
        thumb2.toggleClass("slider_thumb_select"),
        thumb3.toggleClass("slider_thumb_unlect"),
        thumb4.toggleClass("slider_thumb_unlect"),
        thumb5.toggleClass("slider_thumb_unlect"),
    e.preventDefault();
    });

    // When thumb 3 is clicked
    thumb3.click(function(e) {
        slide0.hide(),
        slide1.hide(),
        slide2.hide(),
        slide3.fadeIn(),
        slide4.hide(),
        slide5.hide(),
        text0.hide(),
        text1.hide(),
        text2.hide(),
        text3.fadeIn(),
        text4.hide(),
        text5.hide();
        thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb0.toggleClass("slider_thumb_unlect"),
        thumb1.toggleClass("slider_thumb_unlect"),
        thumb2.toggleClass("slider_thumb_unlect"),
        thumb3.toggleClass("slider_thumb_select"),
        thumb4.toggleClass("slider_thumb_unlect"),
        thumb5.toggleClass("slider_thumb_unlect"),
    e.preventDefault();
    });

    // When thumb 4 is clicked
    thumb4.click(function(e) {
        slide0.hide(),
        slide1.hide(),
        slide2.hide(),
        slide3.hide(),
        slide4.fadeIn(),
        slide5.hide(),
        text0.hide(),
        text1.hide(),
        text2.hide(),
        text3.hide(),
        text4.fadeIn(),
        text5.hide();
        thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb0.toggleClass("slider_thumb_unlect"),
        thumb1.toggleClass("slider_thumb_unlect"),
        thumb2.toggleClass("slider_thumb_unlect"),
        thumb3.toggleClass("slider_thumb_unlect"),
        thumb4.toggleClass("slider_thumb_select"),
        thumb5.toggleClass("slider_thumb_unlect"),
    e.preventDefault();
    });

    // When thumb 5 is clicked
    thumb5.click(function(e) {
        slide0.hide(),
        slide1.hide(),
        slide2.hide(),
        slide3.hide(),
        slide4.hide(),
        slide5.fadeIn();
        text0.hide(),
        text1.hide(),
        text2.hide(),
        text3.hide(),
        text4.hide(),
        text5.fadeIn();
        thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb0.toggleClass("slider_thumb_unlect"),
        thumb1.toggleClass("slider_thumb_unlect"),
        thumb2.toggleClass("slider_thumb_unlect"),
        thumb3.toggleClass("slider_thumb_unlect"),
        thumb4.toggleClass("slider_thumb_unlect"),
        thumb5.toggleClass("slider_thumb_select"),
    e.preventDefault();
    });

    // When the page is loaded set first thumb as selected
    thumb0.toggleClass("slider_thumb_select");

    // AUTO SLIDER

    // If Thumb 0 is Selected
    if(thumb0.hasClass("slider_thumb_select")) {
        function autoslide0() {
            slide0.hide(),
            slide1.fadeIn(),
            text0.hide(),
            text1.fadeIn(),
            thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb0.toggleClass("slider_thumb_unlect"),
            thumb1.toggleClass("slider_thumb_select");
        }
        $("autoslide0").delay(800);
    };

    // If Thumb 1 is Selected
    if(thumb1.hasClass("slider_thumb_select")) {
        function autoslide1() {
            slide1.hide(),
            slide2.fadeIn(),
            text1.hide(),
            text2.fadeIn(),
            thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb1.toggleClass("slider_thumb_unlect"),
            thumb2.toggleClass("slider_thumb_select");
        }
        $("autoslide1").delay(800);
    };

    // If Thumb 2 is Selected
    if(thumb2.hasClass("slider_thumb_select")) {
        function autoslide2() {
            slide2.hide(),
            slide3.fadeIn(),
            text2.hide(),
            text3.fadeIn(),
            thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb2.toggleClass("slider_thumb_unlect"),
            thumb3.toggleClass("slider_thumb_select");
        }
        $("autoslide2").delay(800);
    };

    // If Thumb 3 is Selected
    if(thumb3.hasClass("slider_thumb_select")) {
        function autoslide3() {
            slide3.hide(),
            slide4.fadeIn(),
            text3.hide(),
            text4.fadeIn(),
            thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb3.toggleClass("slider_thumb_unlect"),
            thumb4.toggleClass("slider_thumb_select");
        }
        $("autoslide3").delay(800);
    };

    // If Thumb 4 is Selected
    if(thumb4.hasClass("slider_thumb_select")) {
        function autoslide4() {
            slide4.hide(),
            slide5.fadeIn(),
            text4.hide(),
            text5.fadeIn(),
            thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb4.toggleClass("slider_thumb_unlect"),
            thumb5.toggleClass("slider_thumb_select");
        }
        $("autoslide4").delay(800);
    };

    // If Thumb 5 is Selected
    if(thumb5.hasClass("slider_thumb_select")) {
        function autoslide5() {
            slide5.hide(),
            slide6.fadeIn(),
            text5.hide(),
            text6.fadeIn(),
            thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb5.toggleClass("slider_thumb_unlect"),
            thumb6.toggleClass("slider_thumb_select");
        }
        $("autoslide5").delay(800);
    };

    // If Thumb 6 is Selected
    if(thumb6.hasClass("slider_thumb_select")) {
        function autoslide6() {
            slide6.hide(),
            slide0.fadeIn(),
            text6.hide(),
            text0.fadeIn(),
            thumb6.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb6.toggleClass("slider_thumb_unlect"),
            thumb0.toggleClass("slider_thumb_select");
        }
        $("autoslide6").delay(800);
    };

});

The slider works greatly, however I don’t know how to make it automatic. At the moment I’m trying to use the .delay jQuery function, with no success. I’ve already tried the setTimeOut and SetInterval functions, with no success either.

The problem is that all these functions start counting the time when the page is loaded and not when the thumbs are selected (.hasClass function).

Someone know how to do this? Please let me know if you need to see the structure code (html)

That’s not really the way to create a slider. What if there are more then 6 images ? Look at other sliders ( ie nivo ) and analyze their code.

ZoomIt said
That’s not really the way to create a slider. What if there are more then 6 images ? Look at other sliders ( ie nivo ) and analyze their code.

This slider is a bit different from others, thats why I’m using this method. I’ve already used the nivo slider method, with no success.

I just want to know if I can delay the time when the functions are executed

Just put the function inside a window.load function – it will wait for all the images to load, unlike jQuery(document).ready(), which waits only for the DOM to load. That’s the simplest way.

Or, if you choose jQuery, a more dedicated solution would be to do something like:

$("#slider img").bind("load", function(){
    // Do something when are images are loaded
});

Also have a look at pogoking’s thread: Wanted: jQuery image loader – I think you’ll find it very helpful.

Have a great day,
Boris

cmt said
Just put the function inside a window.load function – it will wait for all the images to load, unlike jQuery(document).ready(), which waits only for the DOM to load. That’s the simplest way.

Or, if you choose jQuery, a more dedicated solution would be to do something like:

$("#slider img").bind("load", function(){
    // Do something when are images are loaded
});

Also have a look at pogoking’s thread: Wanted: jQuery image loader – I think you’ll find it very helpful.

Have a great day,
Boris

Thank you very much

This means that I can use something like this to change the slides that are being shown?

    thumb0.bind("load", function(){
            slide0.hide(),
            slide1.fadeIn(),
            text0.hide(),
            text1.fadeIn(),
            thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb0.toggleClass("slider_thumb_unlect"),
            thumb1.toggleClass("slider_thumb_select");
    });

ThemesFever said

cmt said
Just put the function inside a window.load function – it will wait for all the images to load, unlike jQuery(document).ready(), which waits only for the DOM to load. That’s the simplest way.

Or, if you choose jQuery, a more dedicated solution would be to do something like:

$("#slider img").bind("load", function(){
    // Do something when are images are loaded
});

Also have a look at pogoking’s thread: Wanted: jQuery image loader – I think you’ll find it very helpful.

Have a great day,
Boris

Thank you very much

This means that I can use something like this to change the slides that are being shown?

    thumb0.bind("load", function(){
            slide0.hide(),
            slide1.fadeIn(),
            text0.hide(),
            text1.fadeIn(),
            thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb0.toggleClass("slider_thumb_unlect"),
            thumb1.toggleClass("slider_thumb_select");
    });

It didn’t worked, I will try something else

Inside the $(“img”).load thing above insert a setInterval() function that calls another function, changing the slide shown every X miliseconds.

Pseudocode:

1. When the images load
2.     Set interval of 2000 miliseconds
3.         Hide all slides and show the next (if the last one is currently active => next comes the first slide)

DO NOT , I REPEAT , DO NOT , USE THAT CODE !! just google for bx slider

I will try to explain better what I want

I want to:

Execute function autoslide1 10000 milliseconds after function autoslide0

Execute function autoslide2 10000 milliseconds after function autoslide1

Execute function autoslide3 10000 milliseconds after function autoslide2

Execute function autoslide3 10000 milliseconds after function autoslide2

Execute function autoslide4 10000 milliseconds after function autoslide3

Execute function autoslide5 10000 milliseconds after function autoslide4

Execute function autoslide5 10000 milliseconds after function autoslide4

Anyone knows how to do this?

duotive said
DO NOT , I REPEAT , DO NOT , USE THAT CODE !! just google for bx slider

Why not? It works properly, the problem is that it isn’t automatic

You can see the slider working here: http://www.screenr.com/kuAs