Facing issues while creating automatic scroll for div with contents

Question

I want to slide a div with contents automatically and below is my code that I have used so far.

The HTML:

<div id="gallery">
  <div id="slider" style="width: 6000px; left: -500px;">
     <div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
        <div class="testimonial-icon"></div>

        <div class="testimonial-post">Content here.</div>

        <div class="testimonial-author">

            <span>Sub content</span>
        </div>

        </aside></div>
     <div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
        <div class="testimonial-icon"></div>

        <div class="testimonial-post">Content here.</div>

        <div class="testimonial-author">

            <span>Sub content</span>
        </div>

        </aside></div>
     <div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
        <div class="testimonial-icon"></div>

        <div class="testimonial-post">Content here.</div>

        <div class="testimonial-author">

            <span>Sub content</span>
        </div>

        </aside></div>
  </div>
  <span id="prev"></span>
  <span id="next"></span>
</div>

The CSS:

#gallery{
  position:relative;
  margin: 0 auto;
  overflow:hidden;
  width:500px;
  height:278px;
}
#slider{
  position:absolute;
  left:0;
  height:278px;
}
#slider > div {
  position:relative;
  float:left;
  width:500px;
  height:278px;
}
#slider > div img{
  width:100%;
}
/* buttons */
#gallery > span{
  cursor:pointer;
  position:absolute;
  width:50px;
  height:100%;
  background:rgba(255,255,255,0.5);
  opacity:0.5;
}
#next{
  right:0px;
}
#gallery > span:hover{
  opacity:1;
}

The Script:

var $gal = $('#gallery'),
    $sli = $('#slider'),
    $box = $('div',$sli),
    W    = $gal.width(), // 500
    N    = $box.length,  // 3
    C    = 0,            // a counter
    intv;

$sli.width(W*N);


$('#prev, #next').click(function(){
  C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
  $sli.stop().animate({left: -C*W },800);  
}); 

function auto(){
  intv = setInterval(function(){
    $('#next').click();
  }, 3000);
}
auto(); // start

$('#gallery').hover(function( e ){
  return e.type=='mouseenter'?clearInterval(intv):auto();
});

The jsFiddle Demo Link:

Fiddle link

Issue:

When my content starts to slide, after 2 slides, it disappears and doesn't come back. When I use images instead of content, the things work fine and below is the code and fiddle link for the same.

The HTML:

<div id="gallery">
  <div id="slider">
     <div><img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt=""></div>
     <div><img src="http://s2.postimg.org/66f6us2wl/cats2.jpg" alt=""></div>
     <div><img src="http://s2.postimg.org/ai3sjs9th/cats3.jpg" alt=""></div>
  </div>
  <span id="prev"></span>
  <span id="next"></span>
</div>

The CSS and Script are same as above.

The Fiddle Link:

Fiddle link with Image

I would like to make the div with contents work similarly to the way the one with images is working.

Answer 1

The Reason was the $box.length in your code was not giving 12 instead of 3. Please see the corrected code and check if it solves your problem.

I have added a class box to the div so that it returns 3.When you try to select the div from the parent slider it was counting all the div in the parent and was returning 12 which caused the issue.

JSFIDDLE

Answer 2

the div selector You have used to select content DIV's is not correct, you have used $('div',$sli), which would select all DIV's with children elements, you have to use $('#slider > div') this will select only first child DIV's.

please see this fiddle: fiddle