jQuery: animated slider pager

Question

I've set up an animated slider using jQuery:
jsFiddle demo: http://jsfiddle.net/neal_fletcher/9zRDV/
The reason being I wanted to achieve a slight overhang on the slides, i.e. while viewing slide 1 you can see some of slide 2 etc. The slider works great, perfect in fact for what I'm after, now though I'm trying to figure out if it's possible to set up a pager for this slider, the aim of which being to click on a .slide-menu-item and the slider will slide to the relevant slide, if at all possible?
One other slight problem too, is it possible to animate the slider on load? Thus, the pager will slide every 5 seconds, but you can still navigate the slider using the pager / next and previous buttons?
Any suggestions would be greatly appreciated!
HTML:

<div class="outerwrapper">
    <div class="innerwrapper">
        <div class="inner-slide">SLIDE 01</div>
        <div class="inner-slide">SLIDE 02</div>
        <div class="inner-slide">SLIDE 03</div>
        <div class="inner-slide">SLIDE 04</div>
        <div class="inner-slide">SLIDE 05</div>
        <div class="inner-slide">SLIDE 06</div>
        <div class="inner-slide">SLIDE 07</div>
    </div>
</div>

<ul id="slide-menu">
    <li id="one" class="slide-menu-item">01</li>
    <li id="two" class="slide-menu-item">02</li>
    <li id="three" class="slide-menu-item">03</li>
    <li id="four" class="slide-menu-item">04</li>
    <li id="five" class="slide-menu-item">05</li>
    <li id="six" class="slide-menu-item">06</li>
    <li id="seven" class="slide-menu-item">07</li>
</ul>

<div id="left">LEFT</div>
<div id="right">RIGHT</div>

CSS:

.outerwrapper {
    position: absolute;
    left: 50%;
    height: 250px;
    width: 400px; margin-left: -225px;
    border: 1px solid black;
    overflow: hidden;
    padding-left: 50px;
}
.innerwrapper {
    height: 250px;
    width: 4000px;
}
.inner-slide {
    height: 250px;
    width: 350px;
    float: left;
    background: silver;
}
.innerwrapper div:nth-child(odd) {
    background: silver;
}
.innerwrapper div:nth-child(even) {
    background: red;
}
#left, #right {
    position: absolute;
    cursor: pointer;
}
#left {
    left: 10px; bottom: 10px;
}
#right {
    right: 10px; bottom: 10px;
}

#slide-menu {
    position: absolute;
    top: 250px;
    list-style: none;
}

.slide-menu-item {
    display: inline-block;
    width: 50px;
    cursor: pointer;
}

jQuery:

var animating = false,
    slideWidth = $('.inner-slide').width(),
    $wrapper = $('.outerwrapper'),
    slideIndex = 2,
    slideLen = $('.inner-slide').length,

    build = function() {
        $firstClone = $('.inner-slide').eq(0).clone();
        $secondClone = $('.inner-slide').eq(1).clone();
        $preLastClone = $('.inner-slide').eq(slideLen - 2).clone();
        $lastClone = $('.inner-slide').eq(slideLen - 1).clone();
        $wrapper.find('.innerwrapper').append($firstClone, $secondClone).prepend($preLastClone, $lastClone);
        $wrapper.animate({
            scrollLeft: '+=' + slideWidth * slideIndex + 'px'
        }, 0);
    },
    slide = function(dir, speed) {
        if(!animating) {
            animating = true;
            dir == 'right' ? slideIndex++ : slideIndex--;
            slideIndex == slideLen - 1 ? slideIndex == 0 : '';

            if(slideIndex == 0 && dir == 'left') {
                //if the slide is at the beginning and going left

                slideIndex = slideLen + 1;                
                $wrapper.animate({
                    scrollLeft: slideIndex * slideWidth + 'px'
                }, 0, function() {
                    animating = false;    
                });
                slideIndex--;

            } else if(slideIndex == slideLen + 2 && dir == 'right') {
                //if the slide is at the end and going right

                slideIndex = 1;                
                $wrapper.animate({
                    scrollLeft: slideIndex * slideWidth + 'px'
                }, 0, function() {
                    animating = false;    
                });
                slideIndex++;

            }
            $wrapper.animate({
                scrollLeft: slideIndex * slideWidth + 'px'
            }, speed, function() {
                animating = false;    
            });
        }
    };

$(function() {
    build();
    $('#right, #left').on('click', function() {
        slide($(this).attr('id'), 600)
    });
});

Answer 1

Add the slideTo function:

slideTo = function (index, speed) {
    slideIndex = index+1;
    $wrapper.animate(
        {scrollLeft: slideIndex * slideWidth + 'px'},
        speed, function () {animating = false;}
    );
}

Then call it when you click one of the page buttons:

$('.slide-menu-item').click(function() {
    var toSlideIndex = Math.round($(this).text());
    slideTo(toSlideIndex, 600);
});

And then, to make it slide automatically every 5 seconds, add this:

setInterval(function() {slide("right", 600);}, 5000);

JSFiddle demo: http://jsfiddle.net/9zRDV/3/

Answer 2

for example ?

 $('#yourFavouriteIdForButtonThree').click(function(){
   slide('three', 600)
 });