如何移动菜单中单击的元素向左滚动？

Question

http://jsfiddle.net/cod7ceho/63/

我正在使用idangerous swiper来显示菜单。

我的要求是将菜单中的点击项目向左滚动。

请让我知道如何做到这一点

这是我的代码

var T1categories = ["ONE", "TWO", "THREE" , "FOUR" , "FIVE", "SIX" , "SEVEN" , "EIGHT" ];
createhorizontaltab(T1categories);

function createhorizontaltab(categories) {
    var categoryArr = categories;
    var favoriteresultag = '';
    for (var i = 0; i < categoryArr.length; i++) {
        favoriteresultag += '<div class="swiper-slide"><span>' + categoryArr[i] + '</span></div>';
    }
    $("#swipecontainer").append(favoriteresultag).trigger("create");
}
$(document).on("click", ".swiper-slide", function() {
    $('.swiper-slide').removeClass('swiper-slide-active');
    $(this).addClass('swiper-slide-active');
});

Answer 1

以下是更新的fiddle，并且代码的一部分已更新：

$(document).on("click", ".swiper-slide", function() {
    var $this = $(this);
    var $parent = $this.closest(".swiper-nav");
    var center = $parent.width()/2;
    $parent.css("margin-left", center);
    $parent.css("margin-left", 0);
    $('.swiper-slide').removeClass('swiper-slide-active');
    $this.addClass('swiper-slide-active');
    $parent.css("margin-left", center-$this.offset().left)
});