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

Question

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

我正在使用危险的滑动器来显示菜单。

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

请让我知道如何做这个

这是我的代码

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