jquery change time interval on click and when click function is done reset back to default

Question

I have a custom content slider where the slide happens every after 5 seconds.The slider also have Next and Prev functionalities.

Problems:

1. When I click next the slide doesn't happen immediately.

2. After clicking next/prev the slider starts to slide very fast.

What I want to do:

1.When I click next/prev I want the slider to slide immediately without waiting for the 5 seconds interval. And when the slide is done reset the time interval to default ie 5 seconds.

<div id="content-slide">
    <div id="content-slide-container">
        <div class="content content-1"><h2>1</h2></div>
        <div class="content content-2"><h2>2</h2></div>
        <div class="content content-3"><h2>3</h2></div>
        <div class="content content-4"><h2>4</h2></div>
        <div class="content content-5"><h2>5</h2></div>
        <div class="content content-6"><h2>6</h2></div>
        <div class="content content-7"><h2>7</h2></div>
        <div class="content content-8"><h2>8</h2></div>
        <div class="content content-9"><h2>9</h2></div>
        <div class="content content-10"><h2>10</h2></div>
        <div class="content content-11"><h2>11</h2></div>
        <div class="content content-12"><h2>12</h2></div>
        <div class="content content-13"><h2>13</h2></div>
        <div class="content content-14"><h2>14</h2></div>
        <div class="content content-15"><h2>15</h2></div>
        <div class="content content-16"><h2>16</h2></div>
    </div>
</div>
<div id="navigation">
    <span id="prev-slide">Prev</span>
    <span id="next-slide">Next</span>
</div>

css

#content-slide {
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
#content-slide-container{
    width: 3200px;
    height: 100px;
}
.content {
    width: 200px;
    height: 100px;
    background-color: #FF1493;
    float: left;
}
.content h2{
    font-size: 25px;
    text-align: center;
}
#navigation{
    width: 800px;
    height: 20px;
    margin: 0 auto;
}
#prev-slide{
    width: 100px;
    height: 20px;
    float: left;
    background-color: #000000;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
}
#next-slide{
    width: 100px;
    height: 20px;
    float: right;
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
}

js

$(document).ready(function(){
    var foo = {
        content_width   : 200,
        box             : $("#content-slide-container"),
        interval        : 0,
        counter         : 1,
        pause           : 5000,
        bar             : false
    };
    function startSlider(){
        foo.interval = setInterval(function(){
            // Next
            if(foo.bar){
                foo.box.animate({'marginLeft':'+='+(foo.content_width)});
                foo.counter--;
                if(foo.counter<= 1){
                    foo.bar = false;
                }
            // Prev
            }else{
                foo.box.animate({'marginLeft':'-='+(foo.content_width)});
                foo.counter++;
                if(foo.counter>=16){
                    foo.bar = true;
                }
            }

        },foo.pause);
    }   
    startSlider();
    function pauseSlider(){
        clearInterval(foo.interval);
    }   
    foo.box.on('mouseenter',pauseSlider).on('mouseleave',startSlider);

    $('#prev-slide').click(function(){
        if(foo.counter>1){
            foo.bar = true;
            startSlider();
        }
    });
    $('#next-slide').click(function(){
        if(foo.counter<16){
            foo.bar = false;
            startSlider();
        }
    });
});

JSFIDDLE here

Answer 1

Well I made slight updates to your function which is as below:

See inline comments

DEMO

$(document).ready(function(){
    var foo = {
        content_width   : 200,
        box             : $("#content-slide-container"),
        interval        : 0,
        counter         : 1,
        pause           : 5000,
        bar             : false
    };
    function startSlider(){
        foo.interval = setInterval(function(){
            // Next
            if(foo.bar){
                slideLeft()//keep sliding left in a separate function
            // Prev
            }else{
                slideRight()////keep sliding right in a separate function
            }

        },foo.pause);
    }   

    //2 new functions for slideLeft and slideRight
    function slideLeft(){
        foo.box.animate({'marginLeft':'+='+(foo.content_width)});
        foo.counter--;
        if(foo.counter<= 1){
            foo.bar = false;
        }   
    }
    function slideRight(){
        foo.box.animate({'marginLeft':'-='+(foo.content_width)});
                foo.counter++;
                if(foo.counter>=16){
                    foo.bar = true;
        }
    }
    //end
    startSlider();
    function pauseSlider(){
        clearInterval(foo.interval);
    }   
    foo.box.on('mouseenter',pauseSlider).on('mouseleave',startSlider);

    $('#prev-slide').click(function(){
        if(foo.counter>1){
            foo.bar = true;
            pauseSlider(); //on click clear interval
            slideLeft() //call slideLeft
            startSlider() //start the slide again with interval
        }
    });
    $('#next-slide').click(function(){
        if(foo.counter<16){
            foo.bar = false;
            pauseSlider() //on click clear interval
            slideRight() //slide Right
            startSlider() //start it again
        }
    });
});

Answer 2

You shoul move your code to setPrev and setNext functions. They should bee on the same level with startSlider function. Also you should clear interval after $('#prev-slide').click(function(){ and $('#next-slide').click(function(){