Анимация картинки?

Question

[Dovator]

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

Необходимо реализовать следующее:
При нажатии на миниатюру открывается в пол экрана не вся картинка, а только определенная ее часть (назовем кадр) с изображением закрытого туалета. Под картинкой 2 кнопки "Назад", "Вперед"
Каждое нажатие на кнопку открывает следующий, предыдущий кадр (выделенную область).
Возможно кто то уже сталкивался? Или может проще реализовать этот момент разделив картинку на несколько?
По возможности лучше без js. Спасибо всем, кто дочитал.

Comments

[DanKud]

Без JS обработать событие клика по кнопке не получится. Почему не хотите использовать JS? Это же буквально несколько строчек кода всего.

[Dovator]

DanKud, В JS полный чайник, с трудом представляю, как его подключить к необходимому действию. Подскажете, буду очень благодарен.

Answer 1

[hzzzzl]

только чуть подогнать размеры по пикселям еще
https://codepen.io/anon/pen/MxZaLw
но вообще хз, я бы наверно лучше разбил на отдельные картинки и вкрутил готовый проверенный слайдер, который точно везде будет хорошо выглядеть

Comments

[Dovator]

Именно то, что нужно. Спасибо.

Answer 2

[Валентин]

если бы без кнопки "Назад", "Вперед", то можно на чистом CSS, ваша картинка спрайт + animation (background-position)

Comments

[Dovator]

Можно поподробнее, каким образом?

[Валентин]

https://codepen.io/Guilh/pen/yldGp

Answer 3

[Дмитрий Чайников]

Почти Ваш пример анимации слайдов. Надеюсь, кнопки сами "прикрутите"?

Comments

[Dovator]

Да, это то, что предполагается. С кнопками можете направление указать, как лучше сделать?

[Дмитрий Чайников]

Никита K, вот здесь очень похоже, только вместо действия при наведении курсора, допишите кнопки. Идея в том, что раз у Вас одна длинная картинка (спрайт), то при нажатии на кнопку должно происходить смещение позиции на определенное количество пикселей влево.

Answer 4

[lagudal]

Вот тоже вариант с png спрайтом - простенькая анимация, но для понимания вашего примера подойдет, я думаю )