Q:

Facing issues while creating automatic scroll for div with contents

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.

A:

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 

