jquery - jQuery + CSS 滚动到容器部分

Question

我有一个内容比这个容器大的容器。我用 jQuery 和 CSS 控制它。按钮工作正常，我单击按钮#3，它滚动到第三个 div 的部分。

（演示：点击显示）

我想做的是添加控件以转到下一个/上一个 div 部分。

$(document).ready(function() {
var slidePosition = 0;
$('#slide1_controls').on('click', 'div', function(){
$("#slide1_divs").css("transform","translateX("+$(this).index() * -900+"px)");
$("#slide1_controls div").removeClass("selected");
$(this).addClass("selected");
slidePosition = $(this).index();
});
$('#nastepny').on('click', function(){
$("#slide1_divs").css("transform","translateX("+ slidePosition * -900+"px)");
$("#slide1_controls div").removeClass("selected");
});
});

线

$("#slide1_divs").css("transform","translateX("+$(this).index() * -900+"px)");

工作正常。

这部分

$("#slide1_divs").css("transform","translateX("+ slidePosition * -900+"px)");

没有。

我尝试了不同的变体，$(slidePosition)、+($(slidePosition)) 等等。

Number 而不是 slidePosition 变量可以正常工作。alert(slidePosition) 给出正确的值。

我究竟做错了什么？

Answer 1

试试这个 =>小提琴

$('#nastepny').on('click', function(){

    if(slidePosition<(slideCount-1)){
        slidePosition++;
        pos = +(slidePosition * -900);
       $("#slide1_divs").css("transform"," translateX("+pos+"px)");
       $("#slide1_controls div").removeClass("selected");  
    }else{
       // other action...
    }

});