Javascript jQuery：动画滑块寻呼机

我已经使用jQuery设置了一个动画滑块：
JSFIDLE演示：
原因是我想在幻灯片上稍微突出一些，也就是说，在观看幻灯片1时，你可以看到一些幻灯片2等。滑块工作得很好，事实上非常适合我所追求的内容，尽管我现在正试图弄清楚是否有可能为这个滑块设置一个寻呼机，其目的是单击

.slide菜单项

，如果可能，滑块将滑动到相关幻灯片？
还有一个小问题，是否可以在加载时设置滑块动画？因此，寻呼机将每5秒滑动一次，但您仍然可以使用“寻呼机/下一步”和“上一步”按钮导航滑块
如有任何建议，将不胜感激
HTML:

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)
    });
});

---

添加slideTo功能：

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

然后单击其中一个页面按钮时调用它：

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

然后，要使其每5秒自动滑动，请添加以下内容：

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

---

jsidle演示：

添加slideTo函数：

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

然后单击其中一个页面按钮时调用它：

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

然后，要使其每5秒自动滑动，请添加以下内容：

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

---

jsIDLE demo:

如果将当前幻灯片编号传递给此处的幻灯片函数，则可以通过传递幻灯片编号-1左右来实现相同的效果。如果将当前幻灯片编号传递给此处的幻灯片函数，则可以通过传递幻灯片编号-1左右来实现相同的效果。关闭，但不完全关闭，你有你说的解决方案吗？接近但不完全，你有你说的解决方案吗？