Multiple Sliders In Page Won't Slide

[<M/>]

I created a page with multiple sliders, and the sliders won't slide... I think it could be because of the z-indexes... but can anyone tell me why the sliders won't slide...

I will post my code if needed :)

Thanks

[Sogo7]

I will post my code if needed :)

No need, just move your head to one side so I can look over your shoulder.
Of course not everbody is capable of remote viewing, lives across the street, telepathic, owns a spy sat, has remote access to your PC or knows the URL of the web page you are working on so if you want a quicker answer then yes please always post your code.

[<M/>]

ok so I begin analyze my code before i post it, and i realized it sucked... are you able to write a snippet of jquery code for me on how to do it or at least a tutorial/reference... thanks for the quick response :)

[<M/>]

This is my code as of so far...

HTML:

<div id="main_thumb_command">
<div id="main_thumb_control">               
<div id="thumb1_control">
                                                <div id="thumb_1">
             <a href="#"><img src="1-1.jpeg" alt="Slideshow Image 1" class="active" width="140" heigt="90" /></a> 

             <a href="#"><img src="1-2.jpeg" alt="Slideshow Image 2" width="140" heigt="90"/></a>
             <a href="#"><img src="1-3.jpeg" alt="Slideshow Image 3" width="140" heigt="90"/></a>
             <a href="#"><img src="1-4.jpeg" alt="Slideshow Image 4" class="active" width="140" heigt="90" /></a>
             <a href="#"><img src="1-5.jpg" alt="Slideshow Image 5" class="active" width="140" heigt="90" /></a>
                                                </div>
</div>

                           <div id="thumb2_control">
        <div id="thumb_2">
            <a href="#"><img src="2-1.jpeg" alt="Slideshow Image 1" class="active" width="140" heigt="90" /></a> 
            <a href="#"><img src="2-2.jpeg" alt="Slideshow Image 2" width="140" heigt="90"/></a>
            <a href="#"><img src="2-3.jpeg" alt="Slideshow Image 3" width="140" heigt="90"/></a>
            <a href="#"><img src="2-4.jpeg" alt="Slideshow Image 4" width="140" heigt="90"/></a>
            <a href="#"><img src="2-5.jpeg" alt="Slideshow Image 5" width="140" heigt="90"/></a>
        </div>
</div>

        <div id="thumb3_control">
<div id="thumb_3">
            <a href="#"><img src="3-1.jpeg" alt="Slideshow Image 1" class="active" width="140" heigt="90" /></a>
            <a href="#"><img src="3-2.jpeg" alt="Slideshow Image 2" width="140" heigt="90"/></a>
            <a href="#"><img src="3-3.jpeg" alt="Slideshow Image 3" width="140" heigt="90"/></a>
            <a href="#"><img src="3-4.jpeg" alt="Slideshow Image 4" width="140" heigt="90"/></a>
            <a href="#"><img src="3-5.jpeg" alt="Slideshow Image 5" width="140" heigt="90"/></a>

        </div>   
      </div>
</div>
</div>

CSS

#main_thumb_control {
    width: 506px;
    height: 170px;
    position: absolute;
    font-size: 15px;
    background-image:url(background.png');
    z-index: 15;
    left: 480px;
    top: 36px;
    color: #FFF;
    text-align: center;
    }
#main_thumb_command {
    margin: 0 auto;
    width: 1000px;
    position: absolute;
    z-index: 11;
    top: 275px;
    height: 200px;
    }



#thumb3_control {
    z-index: 76;
    position: absolute;
    width: 165px;
    height: 100px;
    left: 352px;
    top: 41px;
    }


#thumb_3 {
    position:absolute;
    height:90px;
    width: 140px;
        z-index:70;
    top: 0px;

}

#thumb_3 IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:78;
    opacity:0.0;
}

#thumb_3 IMG.active {
    z-index:80;
    opacity:1.0;
}

#thumb_3 IMG.last-active {
    z-index:79;}






#thumb1_control {
    z-index: 30;
    position: absolute;
    width: 150px;
    height: 100px;
    left: 15px;
    top: 41px;
    }

    #thumb2_control {
    z-index: 30;
    position: absolute;
    width: 165px;
    height: 100px;
    left: 185px;
    top: 41px;
    }
#thumb_1 {
    position:absolute;
    height:90px;
    width: 140px;
        z-index:79;
    top: 0px;

}

#thumb_1 IMG {
    position:absolute;
    top:0;
    left:0px;
    z-index:78;
    opacity:0.0;
}

#thumb_1 IMG.active {
    z-index:80;
    opacity:1.0;
}

#thumb_1 IMG.last-active {
    z-index:79;
}        

#thumb_2 {
    position:absolute;
    height:90px;
    width: 140px;
        z-index:20;
    top: 0px;

}

#thumb_2 IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:28;
    opacity:0.0;
}

#thumb_2 IMG.active {
    z-index:30;
    opacity:1.0;
}

#thumb_2 IMG.last-active {
    z-index:29;
}   

Jquery

function slideSwitch() {
    var $active = $('#thumb_1 IMG.active');

    if ( $active.length == 0 ) $active = $('#thumb_1 IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#thumb_1 IMG:first');


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

function slideSwitch() {
    var $active = $('#thumb_2 IMG.active');
    if ( $active.length == 0 ) $active = $('#thumb_2 IMG:last');
    var $next =  $active.next().length ? $active.next()
        : $('#thumb_2 IMG:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
$(function() {
    setInterval( "slideSwitch()", 5000 );
});

function slideSwitch() {
    var $active = $('#thumb_3 IMG.active');

    if ( $active.length == 0 ) $active = $('#thumb_3 IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#thumb_3 IMG:first');


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

[lps]

Based on my understanding and your question mentioning 'mulitple slide', I assumed you have assigned your code with different id, and make sure you did bind them with the jquery sliding. Example, jQuery('#slide1').slide(); jQuery('#slide2').slide();
If this didn't give you a hint, maybe you will have your code upload on server and have us debug it for you.

[pritaeas]

You need to rename the functions slideSwitch (you have three), or change them to one single function which accepts the div id as parameter.

[<M/>]

I know this maybe a stupid question... but how do you rename the slideSwitch functions?

[pritaeas]

Just give the second and the third new names, slideSwitch2 and slideSwitch3 for example.

[<M/>]

oh ok, let me try that :)

[<M/>]

nice job pritaeas, you got exactly 6500 posts :)

[<M/>]

I changed the names of slideSwitch... it doesn't work... :(

[<M/>]

ok so currently i changed how i did it, and it doesn't slide on browser but it slides on D.W. preview... shall i post my code so you can see?

[pritaeas]

Sure, that will help.

[<M/>]

Sorry guys for not responding soon enough, i wasn't never my computers the last couple of days... i will pm my site so you can look at what i mean :)

[pritaeas]

Please keep the info in the thread (and do not PM me for help), so anyone can see and help

This page does not load in Opera for some reason. Maybe because the style is not in the head, and the script is nor in the head, nor in the body. You may want to fix that.

It says your lnk_javascript file cannot be found too.

These kinds of issues ccan easily be found, if you use a browser's developer tools.

[JorgeM]

Yeah, I would suggest that as well...you can use Firefox, Chrome with developer tools to help you fix these types of bugs..

pritaeas is referring to line #587 (from viewing the html source),

<script src="LNK/lnk_javascript.js" type="text/javascript"></script>

That link returns a 404 (page not found). Check your path, name of file, and/or make sure that you do infact have a script file in that location.

[<M/>]

Sorry pritaeas... but i don't want people to see the link...., i never tested in opera yet....

I do use fire bug, and i noticed that it says the .js file is missing... how do i fix that... do i upload it?

I'll try out your soliotion JorgeM!

[pritaeas]

do i upload it?

Of course, if you link it, you must upload it.

[<M/>]

OK, i uploaded it, but I temporarily hid the multiple sliders so i only display 1, if i can figure out 1, could figure all 4...

[<M/>]

I think it was a mistake of me creating another article for this, but you can check it out right here:
Click Here

[pritaeas]

If you add that code here, I can delete the other thread if you want. You can always use "Flag Bad Post" to get a moderator's attention for such things.

Even better would be to put your code up on http://jsfiddle.net/ so people can tweak it there.

[<M/>]

My code is here.... slider doesn't slide..

Jquery:

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

HTML:

<div id="slideshow">                                                           
   <!--THE MAIN SLIDER DIV TAG-->
            <img src="img1.png" alt="Slideshow Image 1" class="active" />
            <img src="img2.png" alt="Slideshow Image 2"/>  
   <!-- END MAIN SLIDER DIV TAG -->
</div>

CSS:

 #slideshow {
        position:relative;
        height:408px;
        width: 1000px;
        z-index: 0;
        top: 5px;}
    #slideshow IMG {
        position:absolute;
        top:0;
        left:0;
        opacity:0.0;
        width: 1000px;
        overflow: hidden;
        z-index: 0;}
     #slideshow IMG.active {
        z-index:0;
        opacity:1.0;}
      #slideshow IMG.last-active {
         z-index:0;}

[ansaripk]

Hi mSedique,

Can you please the page with all sliders on your webserver and share the page link with us so I can see what is the problem. For initial analysis i suggest to cut the codes from function slideSwitch and combined all codes into one function like this:

function slideSwitch() { 
    .....
    .....
    ..... 
    // code for 2nd slider goes  here
    .....
    .....
    .....
    // code for 3rd slider goes here
    .....
    .....
    .....
}