Image Slider from right to left
<p>This is my code, I have five images each has its own div, and a common class "image".
My question is how to achieve the effect in the GIF.
When you click on any number the current image moves to left and the new image comes from the right.</p>

<p>HTML</p>

<pre><code>        &lt;!DOCTYPE html&gt;
        &lt;html lang="en"&gt;[enter image description here][1]

            &lt;body&gt;

                    &lt;div class="image"&gt;
                        &lt;div class="image-one"&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;div class="image"&gt;
                        &lt;div class="image-two"&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;div class="image"&gt;
                        &lt;div class="image-three"&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;div class="image"&gt;
                        &lt;div class="image-four"&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;div class="image"&gt;
                        &lt;div class="image-five"&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;div class="num-one num"&gt;
                        1
                    &lt;/div&gt;
                    &lt;div class="num-two num"&gt;
                        2
                    &lt;/div&gt;
                    &lt;div class="num-three num"&gt;
                        3
                    &lt;/div&gt;
                    &lt;div class="num-four num"&gt;
                        4
                    &lt;/div&gt;
                    &lt;div class="num-five num"&gt;
                        5
                    &lt;/div&gt;

        &lt;/body&gt;
        &lt;/html&gt;
</code></pre>

<p>CSS</p>

<pre><code>                body {
                    width: 100%;
                }

                .image {
                    position: fixed;
                    top: 210px;
                    left: 50%;
                    width: 700px;
                    height: 500px;
                    text-align: center;
                    margin-left: -350px;
                }

                .image-one {
                    position: fixed;
                    width: 700px;
                    height: 500px;
                    background-image: url(images/2322.jpg);
                    background-size: cover;
                    background-position: center center;
                }

                .image-two {
                    position: fixed;
                    left: 1500px;
                    width: 700px;
                    height: 500px;
                    background-image: url(images/4334f4.jpg);
                    background-size: cover;
                    background-position: center center;
                    box-shadow: 0 0px 10px rgba(0,0,0,0.25);
                    border-left: solid white;
                    border-width: 5px;
                }

                .image-three {
                    position: fixed;
                    left: 1500px;
                    width: 700px;
                    height: 500px;
                    background-image: url(images/54454c43.jpg);
                    background-size: cover;
                    background-position: center center;
                    box-shadow: 0 0px 10px rgba(0,0,0,0.25);
                    border-left: solid white;
                    border-width: 5px;
                }

                .image-four {
                    position: fixed;
                    left: 1500px;
                    width: 700px;
                    height: 500px;
                    background-image: url(images/23fd7hgg.jpg);
                    background-size: cover;
                    background-position: center center;
                    box-shadow: 0 0px 10px rgba(0,0,0,0.25);
                    border-left: solid white;
                    border-width: 5px;
                }

                .image-five {
                    position: fixed;
                    left: 1500px;
                    width: 700px;
                    height: 500px;
                    background-image: url(images/766gfs45.jpg);
                    background-size: cover;
                    background-position: center center;
                    box-shadow: 0 0px 10px rgba(0,0,0,0.25);
                    border-left: solid white;
                    border-width: 5px;
                }

                .num {
                    position: fixed;
                    left: 500px;
                    top: 750px;
                    width: 50px;
                    height: 50px;
                    text-align: center;
                    font-family: serif;
                    font-size: 25px;
                    line-height: 50px;
                    background-color: dodgerblue;
                }

                .num-two {
                    position: fixed;
                    left: 550px;
                }

                .num-three {
                    position: fixed;
                    left: 600px;
                }

                .num-four {
                    position: fixed;
                    left: 650px;
                }

                .num-five {
                    position: fixed;
                    left: 700px;
                }
</code></pre>

<p><strong><a href="https://i.stack.imgur.com/IuhxX.gif" rel="nofollow">https://i.stack.imgur.com/IuhxX.gif</a></strong></p>