I'm trying to showcase items by letting users have the ability to rotate objects in a 360 view. To do so, I thought of taking multiple pictures of the item itself in different angles. Each time you click the ***next*** button (*button on the right*), pictures of each angle will alternate, making an illusion that the object is turning.

For the code, I've successfully made each picture turn using an array and a counter. The thing is that on the last picture, it seems that you have to click the ***next*** button twice before it re-loop to the first image.

Here's my code:

```js
var imagesArray = ['https://assets.logitech.com/assets/65019/3/mouton-boat-m90-refresh-gallery-image.png',
    'https://brain-images-ssl.cdn.dixons.com/4/0/21775704/u_21775704.jpg',
    'https://c1.neweggimages.com/ProductImage/26-104-370-04.jpg'
];

var ImageCounter = 0;

$(".ForwardButton").click(function() {

    ImageCounter++;

    if (ImageCounter > 2) {

        ImageCounter = -1;

    } else {

        $('.ImageDisplay').css({
            'background-image': 'url(' + imagesArray[ImageCounter] + ')'
        });

    }

});
```

```css
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

.ImageBox {
    border: silver 1px solid;
    width: 100%;
    height: 100%;
    text-align: center;
}

.ImageDisplay {
    margin: 25px;
    background-image: url("https://assets.logitech.com/assets/65019/3/mouton-boat-m90-refresh-gallery-image.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 35vw;
}

.ControlBar {
    width: 100%;
    height: 100px;
    background-color: #1F2326;
    padding-top: 25px;
    text-align: center;

}

.PreviousButton {
    background-color: white;

    width: 70px;
    height: 50px;
    border-radius: 3px;
    text-align: center;
    margin: auto;
}

.PreviousButton:hover {
    background-color: #F28C09;
}

.PlayNStopButton {
    background-color: white;

    width: 70px;
    height: 50px;
    border-radius: 3px;
    text-align: center;
    margin: auto;
}

.PlayNStopButton:hover {
    background-color: #F28C09;
}

.ForwardButton {
    background-color: white;

    width: 70px;
    height: 50px;
    border-radius: 3px;
    text-align: center;
    margin: auto;
}

.ForwardButton:hover {
    background-color: #F28C09;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br>
<div class="container">
    <div class="ImageBox">
        <div class="ImageDisplay">

        </div>

    </div>

    <div class="ControlBar">
        <div class="col-xs-4">
            <div class="PreviousButton">

                <svg width="35px" height="auto" viewBox="0 0 30.853 20.892" enable-background="new 0 0 30.853 20.892" xml:space="preserve">
                    <g>
                        <path fill="#1F2326" d="M29.181,0.146c-2.695,1.558-5.393,3.113-8.088,4.671c-0.9,0.521-1.803,1.039-2.701,1.56
                            c0-1.756,0-3.514,0-5.271c0-0.845-0.943-1.379-1.672-0.959C11.328,3.26,5.933,6.375,0.541,9.487c-0.721,0.415-0.721,1.503,0,1.918
                            c5.393,3.112,10.787,6.228,16.18,9.341c0.729,0.42,1.672-0.115,1.672-0.959c0-1.759,0-3.516,0-5.271
                            c3.598,2.077,7.191,4.153,10.789,6.23c0.729,0.42,1.672-0.115,1.672-0.959c0-6.228,0-12.454,0-18.682
                            C30.853,0.261,29.91-0.273,29.181,0.146z"/>
                    </g>
                </svg>

            </div>
        </div>

        <div class="col-xs-4">
            <div class="PlayNStopButton">

                <svg width="30px" height="auto" viewBox="0 0 24.404 21.643" enable-background="new 0 0 24.404 21.643" xml:space="preserve">
                    <g>
                        <g>
                            <path fill="#1F2326" d="M23.881,9.862C18.488,6.75,13.094,3.635,7.701,0.521C6.973,0.102,6.029,0.636,6.029,1.48
                                c0,6.228,0,12.454,0,18.682c0,0.844,0.943,1.379,1.672,0.959c5.393-3.113,10.787-6.229,16.18-9.341
                                c0.408-0.236,0.543-0.601,0.521-0.959C24.424,10.463,24.289,10.099,23.881,9.862z"/>
                            <path fill="#1F2326" d="M1.602,0H1.48C0.664,0,0,0.662,0,1.48v18.682c0,0.818,0.664,1.48,1.48,1.48h0.121
                                c0.818,0,1.481-0.662,1.481-1.48V1.48C3.083,0.662,2.42,0,1.602,0z"/>
                        </g>
                    </g>
                </svg>

            </div>
        </div>

        <div class="col-xs-4">
            <div class="ForwardButton">
                <svg width="35px" height="auto" viewBox="0 0 30.853 20.893" enable-background="new 0 0 30.853 20.893" xml:space="preserve">
                    <g>
                        <path fill="#1F2326" d="M1.672,0.146C4.367,1.704,7.064,3.26,9.76,4.817c0.9,0.521,1.803,1.039,2.701,1.56c0-1.756,0-3.514,0-5.271
                            c0-0.845,0.943-1.379,1.672-0.959c5.393,3.113,10.787,6.229,16.18,9.341c0.721,0.415,0.721,1.503,0,1.918
                            c-5.393,3.112-10.787,6.228-16.18,9.341c-0.729,0.42-1.672-0.115-1.672-0.959c0-1.759,0-3.516,0-5.271
                            c-3.598,2.077-7.191,4.153-10.789,6.23C0.943,21.166,0,20.631,0,19.787C0,13.56,0,7.333,0,1.105C0,0.261,0.943-0.273,1.672,0.146z"
                            />
                    </g>
                </svg>

            </div>
        </div>

    </div>
</div>
```

Am I missing something?

Also, I haven't worked on the other 2 buttons yet. I think I'll be ok with figuring how to code it, but if you were interested or had recommendations on how to code it, here what they will be used for:

> 
> The ***back*** button (*button on the left*) is supposed to do the
> opposite of the *next* button, which brings back the previous picture.
> 
> 
> The ***Play/Pause*** button (*button in the centre*) will make each
> picture turn automatically in a loop. As if it was a video, but only
> reading each frame.
> 
> 
> 

Thanks!