Как поворачивать блок каждый раз по клику?

Question

[Maksim Ivanov]

Есть у меня слайдер. каждый раз по клику на стрелку нужно поворачивать блок. Поворот зависит от того на какую стрелку кликаешь. С помощью такого скрипта у меня получаеться повернуть только один раз. на след. клики не поворачивает. Подскажите как дописать скрипт так чтобы каждый раз по клику работало???

$(".slider-wrapper .owl-next").click(function(){
$(".slider-wrapper .circle").css({
"transform": "rotate(60deg)"
});
});

$(".slider-wrapper .owl-prev").click(function(){
$(".slider-wrapper .circle").css({
"transform": "rotate(-60deg)"
})
});

Answer 1

[iBird Rose]

https://jsfiddle.net/j3suj624/

Comments

[Максим]

хоть ответ и был дан давно но мне он помог ..спасибо

Answer 2

[Arkadiy Parinov]

Данный пример не работает, т.к. вы каждый раз применяете один и тот же класс, чтобы вращать элемент постоянно необходимо хранить текущее положение элемента (а вернее угол повотора), увеличивать его по клику и применять свойство к элементу.

С помощью JQuery будет как-то так:

var rotation = 0;                             // variable to do rotation with
    $(".slider-wrapper .circle").click(function() {
        rotation = (rotation + 45) % 360; // the mod 360 probably isn't needed
        $(this).rotate(rotation);

Код взял отсюда