Question

I am trying to make a jQuery slider but with div’s:

<div id="block-1">
        <div id="bannerleft">
            <div class="wsite-header-1"></div>
        </div>
        <div id="bannerright">
            <h2><span class='wsite-text'>CALL US NOW!</span></h2>
            <p><span class='wsite-text'>Call now and get&nbsp;professional service delivered to you by our team of professional plumbers and technicians.<br/><br/>24/7 Emergency Service available</span></p>
            <div style="text-align:left;"><div style="height: 0px; overflow: hidden;"></div>
<a class="wsite-button wsite-button-large wsite-button-highlight" href="contact-us" >
<span class="wsite-button-inner">CALL NOW 1</span>
</a>
<div style="height: 0px; overflow: hidden;"></div></div>
        </div>
        </div>

<div id="block-2" style="display:none;">
        <div id="bannerleft">
            <div class="wsite-header2"></div>
        </div>
        <div id="bannerright">
            <h2><span class='wsite-text'>CALL US NOW! 2</span></h2>
            <p><span class='wsite-text'>Call now and get&nbsp;professional service delivered to you by our team of professional plumbers and technicians.<br/><br/>24/7 Emergency Service available</span></p>
            <div style="text-align:left;"><div style="height: 0px; overflow: hidden;"></div>
<a class="wsite-button wsite-button-large wsite-button-highlight" href="contact-us" >
<span class="wsite-button-inner">CALL NOW 2</span>
</a>
<div style="height: 0px; overflow: hidden;"></div></div>
        </div>
        </div>

And here is the jQuery part

$(document).ready(function() {

     function animate(){
         $('#block-1').toggle().delay(3000);    
         $('#block-2').toggle().delay(3000); 
         $('#block-3').toggle().delay(3000);         
     } animate();  
     setInterval(animate, 10000);  

});

Sadly it doesn’t work. It goes to block-2 right away and when it displays block-1 it also shows block-3 under it. Any way how to fix this code?

Answer 1

Here I created a demo that fades nicely your elements.
Just added a class .fade to all your main DIVs, and a CSS position:absolute; to make them overlay properly one over the other.

jsBin demo

This one will also allow you to pause the slides on hover!

var S = 0,             // START 'SLIDE'
    $el = $(".fade"),  // FADE ELEMENTS
    Tim;               // TIMEOUT VAR

function anim(){
  $el.eq(S=++S%$el.length).fadeTo(500,1).siblings($el).stop(1).fadeTo(500,0);
}

function autoAnim(){
    Tim = setTimeout(function(){
      anim();
      autoAnim();
    },4000);
}
autoAnim();

$el.on('mouseenter mouseleave',function(e){
   var m = e.type==='mouseenter' ? clearTimeout( Tim ) : autoAnim();    
}).eq(S).show().siblings($el).hide();

HTML:

<div id="block-1" class="fade"></div>
<div id="block-2" class="fade"></div>
<div id="block-3" class="fade"></div>

CSS:

.fade{
  position:absolute;
}

Just borrowed the code from a plugin of mine, i you’re interested you can take a look
Or if you have Q about the above, feel free to ask