Question

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

我需要移动菜单中的点击项目向左滚动。

将项目向左移动4到5厘米

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

这是我的代码

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

忘记了小提琴

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

Answer 1

只需在样式表中添加此样式

即可

.swiper-slide-active span{
    margin-left : 5px;
}

Answer 2

您可以使用animate或css将有效元素移至开头。

查看更新的JSFiddle

我改变的是：

[js]
$('.swiper-slide').removeClass('swiper-slide-active');
$(this)
    .css({left: $(this).position().left})
    .addClass('swiper-slide-active')
    .animate({left: '0px'});
$('.swiper-wrapper').animate({
    'padding-left': $(this).outerWidth() + 'px'
});

[CSS]

.swiper-slide-active {
    position: absolute;
    top: 0;
}
.swiper-wrapper {
    position: relative;
}

将菜单中的所选项目动态移动到左侧

2 个答案: