jQuery + CSS faire défiler jusqu'à la partie conteneur

Question

J'ai un conteneur dont le contenu est supérieur à ce conteneur. Je le contrôle avec jQuery et CSS. Les boutons fonctionnent bien, je clique sur le bouton # 3 et il défile vers la partie du troisième div.

(Demo: click to show)

Ce que je veux faire est d'ajouter des contrôles pour aller à la prochaine/précédente partie 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"); 
}); 
}); 

Ligne

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

fonctionne très bien.

Cette partie

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

ne fonctionne pas.

J'ai essayé différentes variations, $ (slidePosition), + ($ (slidePosition)) et beaucoup, beaucoup d'autres.

Nombre à la place de la variable slidePosition fonctionne correctement. alert (slidePosition) donne une valeur correcte.

Qu'est-ce que je fais mal?

Answer 1

essayer =>FIDDLE

$('#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... 
    } 

});