В лоб:
function myFunc(){
var el=document.getElementById('tt2'),
str=el.style.transform,
translate=(/translate\((\S+?),\s(\S+?)\)/i.exec(str)||[0,0]),
translateX=parseInt(translate[1]); //-66.6%
translateX+=33.3;
console.log(translateX);
el.style.transform = "translate(" +translateX+"%,0)";
}
Вообщем, пытаться с того кода что то слепить у меня выдержки не хватило :
codepen.io/anon/pen/XbxEwX<div id="tt2" class="slider">
<div><div>Digital</div><div>Brain</div><div>created</div><div>this</div></div>
</div>
<button onclick="slider.prev();">Prev</button>
<button onclick="slider.next();">Next</button>
.slider{
width:30%;
height:100px;
background-color: green;
overflow: hidden;
position: relative;
}
.slider>div{
display: inline-block;
height:100%;
white-space: nowrap;
position: relative;
width:100%;
padding: 0;
-webkit-transition: all 1s cubic-bezier(0.5, 0, 0.5, 1);
}
.slider>div>div{
display: inline-block;
width:100%;
height:100%;
text-align:center;
margin: 0;
}
function Slider(el){
var $el=(typeof el=="string")?document.getElementById(el):el,
content=$el.getElementsByTagName('div')[0],
sliders=content.getElementsByTagName('div'),
count=sliders.length,
width=content.offsetWidth,
step=width/count;
this.index=0;
function setTX(value){
content.style.transform = "translate(" +value+"%,0)";
}
this.showIndex=function(index){
console.info(index);
var max=count-1;
if(index>max){
index=0;
}else if(index<0){
index=max;
}
console.log('index=',index,max);
this.index=index;
setTX(index*(-100));
}
this.next=function(){
console.log('next');
this.showIndex(++this.index)
}
this.prev=function(){
console.log('prev');
this.showIndex(--this.index)
}
}
var slider=new Slider("tt2");
