jquery auto slider with prev/next

Question

i saw many posts with sliders using jquery/css.

i have a database from where i retrieve links of images and text.

i want to create a recent feed section of a slider type with automatic scrolling, like the ones seen on many sites.

I saw this example on stackoverflow http://jsfiddle.net/uXn2p/1/

It uses overflow hidden property and animates the sliding.

I added this piece of code to make it automated.

setInterval(function() {
 $(".list").delay( 800 ).animate({scrollLeft: "+=330"}, 'slow', "swing");
  $(".list").delay( 800 ).animate({scrollLeft: "+=330"}, 'slow', "swing");


 $(".list").delay( 800 ).animate({scrollLeft: "-=990"}, 'slow', "swing");

    }, 2000);

But once this animation begins the prev/next buttons stop working. I know i am doing something wrong that isn't valid with jquery.

What is it? How do i correct it?

Answer 1

I have tweaked your code quite a bit, but I think I got what you are looking for. I went off this example: http://jsfiddle.net/n8B2k/1/

I changed the html to be this below, but it looks the same. I also added the functionality to remove the "prev" button when it was all the way to the left and remove the "more" button when all the way to the right (you can remove or modify it if you don't like it).

<div id="slidesContainer">
  <div id="slideInner">
    <div class="slide">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div class="slide">
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div class="slide">
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
    </div>
  </div>
</div>
<div id="slideShow">
  <button class="control" id="leftControl">prev</button>
  <button class="control" id="rightControl">more</button>
</div>

It's not the exact animation you used, but you can modify it.

Here is my fiddle: http://jsfiddle.net/uXn2p/124/

Answer 2

I modify this example http://jsfiddle.net/uXn2p/1/ . Hope it help you resolve your problem.

var myVar = setInterval(function() {
    $(".list").delay(800).animate({scrollLeft: "+=330"}, 'slow', "swing");
}, 2000);

$("#more").click(function() {
    clearInterval(myVar);
    $(".list").animate({scrollLeft: "+=330"}, 300, "swing");
    myVar = setInterval(function() {
        $(".list").delay(800).animate({scrollLeft: "+=330"}, 'slow', "swing");
    }, 2000);
});

$("#prev").click(function() {
    clearInterval(myVar);
    $(".list").animate({scrollLeft: "-=330"}, 300, "swing");
    myVar = setInterval(function() {
        $(".list").delay(800).animate({scrollLeft: "+=330"}, 'slow', "swing");
    }, 2000);
});