Как сделать повторное изменение стиля при нажатии кнопки?

Question

[del993788]

Здравствуйте. Вопрос ламерский, но даже гугл меня понять не может) Помогите мне.
Есть код, который перемещает div на -33%, а как сделать, чтобы при повторном нажатии, div перемещался еще на 33% то есть в результате, translate должен будет быть 0%.

Начальное положение transform -66% > после 1го нажатия -33% > после второго 0%.

Зачем всё это? Да я слайдер пытаюсь сделать. Есть Div который имеет ширину 300%, а эти 33% - это те самые 100% экрана. То есть 1 слайд - это весь экран.

Почему я фигнёй маюсь и не возьму готовое решение? Мне нужны размеры в процентах, а не в пикселях. Все слайдеры, которые я пересмотрел, были сделаны на пикселях. Я попытался переделать несколько слайдеров под себя, но у меня ничего не вышло...

Я правда не знаю, что я буду делать, когда будет 0%, ведь блок будет и дальше двигаться. То есть -66,-33,0,33,66. Мне нужно, чтобы слайдер остановился на 0... Но это потом)

function myFunc(){
document.getElementById('tt2').style.transform = "translate(" + -33.3 + "%,0)";
}

Если вы встречали какие либо слайдеры в процентах, где двигал ими transform, то пожалуйста дайте ссылку.

Answer 1

[Dmitriy Mozgovoy]

В лоб:

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

Comments

[del993788]

codepen.io/drkrol/pen/ZGqxxg в бровь. что не так?

[del993788]

upd. С изменённым кодом еще хуже стало)

[Dmitriy Mozgovoy]

qqignatqq: тот код читает translate c style атрибута, а у Вас начальное значение -66% с CSS приходит

[del993788]

Простите меня. Ламер я. Извините, а вы случайно не знаете как сделать так, чтобы дойдя до 0% следующие нажатие возвращало обратно на 66%?

[del993788]

)))посмотрите исходный код. codepen.io/drkrol/pen/ZGqxxg бред какой то. первый шаг назад сразу на 32,67... почему так?

Answer 2

[Александр Крупнов]

Можно попробовать использовать дополнительный атрибут у дива, который будет хранить состояние слайдера и от его значения уже вычислять - какой процент стоит передать диву.

Answer 3

[Андрей Андреев]

bxSlider этот смотрели?