Animated picture?

Question

css

Good afternoon everyone. Friends, the crux of the matter is this. Below is a picture consisting of several frames.

It is necessary to implement the following:
When you click on the thumbnail, not the whole picture opens to the half of the screen, but only a certain part of it (let's call it a frame) with an image of a closed toilet. Under the picture there are 2 buttons "Back", "Forward"
Each click on the button opens the next, previous frame (selected area).
Perhaps someone has already encountered? Or maybe it's easier to realize this moment by dividing the picture into several?
Better without js if possible. Thanks to everyone who read.

Answer 1

just slightly adjust the pixel dimensions
https://codepen.io/anon/pen/MxZaLw
but in general xs, I would probably better break it into separate pictures and screw in a ready-made proven slider that will definitely look good everywhere

Answer 2

if without the "Back", "Forward" button, then you can use pure CSS, your picture is a sprite + animation (background-position)

Answer 3

Almost your example of slide animation . I hope you "screw" the buttons yourself?

Answer 4

Here is also an option with a png sprite - a simple animation, but for understanding your example it will do, I think)

Answer 5

Check if an element exists:

if ($('.class').length > 0) {
    // существует
} else {
    // не существует
}

Or check for undefined