Jquery 将当前选项卡向左滑动，将下一个选项卡从右滑入

我试图找到我问题的答案，但没有成功。 我找到了这个例子：但它并没有为我做这件事

我有一个工作的“选项卡部分”有三个选项卡（你可以看到下面的代码）

我想要实现的是，在按下下一个选项卡时，使当前选项卡向左滑动，下一个选项卡从右侧滑入，替换另一个选项卡（如果在选项卡中“向后”，则相反）

请看这个伟大的例子：

我的HTML：

<ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Daniel Pettersson</li>
    <li class="tab-link" data-tab="tab-2">Scott Asli</li>
    <li class="tab-link" data-tab="tab-3">Teamet</li>
</ul>

    <div id="tab-1" class="tab-content current">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div id="tab-2" class="tab-content">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div id="tab-3" class="tab-content">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>

以及jQuery：

$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

})

我需要做什么来实现这一点

非常感谢您的帮助！谢谢

编辑：我在示例页面上找到了这个js代码，它具有我想要的效果：

//slide the button to the next item
function goNext() {
    if ( decount != counter) {
    $('#slider ul').animate({ left: '-=' + $('#slider').width() }, 400, 'swing', function() { });
    $('.active').removeClass('active').next().addClass('active');
    decount++;
    window.location.hash = decount;
    }
}

function goBack() {
    if ( decount != 1) {
    $('#slider ul').animate({ left: '+=' + $('#slider').width() }, 400, 'swing', function() { });
    $('.active').removeClass('active').prev().addClass('active');
    decount--;
    window.location.hash = decount;
    }
}

---

这就是解决办法吗？我不太擅长jQuery，所以我不知道如何将它添加到我目前拥有的代码中。

我想你要找的是

谢谢@artdias90，但我对jQuery完全陌生，所以我不了解你建议的链接上的任何内容。您能基于我的代码创建一个示例代码吗？我在JSFIDLE中做了一些尝试，但到目前为止还没有成功。尝试添加我在问题中链接到的stackoverflow文章中的jQuery代码。您可以在这里找到：-请看一看，看看有什么问题

//slide the button to the next item
function goNext() {
    if ( decount != counter) {
    $('#slider ul').animate({ left: '-=' + $('#slider').width() }, 400, 'swing', function() { });
    $('.active').removeClass('active').next().addClass('active');
    decount++;
    window.location.hash = decount;
    }
}

function goBack() {
    if ( decount != 1) {
    $('#slider ul').animate({ left: '+=' + $('#slider').width() }, 400, 'swing', function() { });
    $('.active').removeClass('active').prev().addClass('active');
    decount--;
    window.location.hash = decount;
    }
}