Javascriptのスライドショーでループさせたい

前提・実現したいこと

javascriptで、「＜」もしくは「＞」ボタンを押すと前もしくは次に進むスライドショーを作りました。配列に画像を配置していて、最後まで行くと1枚目の写真に戻るようにしたいです。

発生している問題

配列に入れている最後の写真が表示されず、最後から二番目の写真の次に、配列の最初の写真に戻ってしまう

該当のソースコード

html
1<div>
2    <img src="images/blank.png" alt="" id="background">
3</div>

javascript
1<script>
2    const backgroundImage = ['images/blank.png', 'images/background2.png', 'images/background3.png', 'images/background4.png', 'images/background5.png'];
3    
4    let current = 0;
5    
6    function changeImage(num) {
7        if(current + num >= 0 && current + num < backgroundImage.length) {
8            current += num;
9            document.getElementById('background').src = backgroundImage[current];
10        }
11        if(current + num >= backgroundImage.length) {
12            current = 0;
13            document.getElementById('background').src = backgroundImage[current];
14        }
15    };
16    
17    document.getElementById('prev').onclick = function() {
18        changeImage(-1);
19    };
20    document.getElementById('next').onclick = function() {
21       changeImage(1);
22    };
23    document.getElementById('change').onclick = function() {
24       changeImage(1);
25    };
26</script>

試したこと

上記のように、current + num >= backgroundImage.lengthの時にcurrentの値を0に書き換えることで、配列の初めに戻せると思って試しました。初めに戻せるのはいいのですが、配列の最後の写真が表示されなくなってしまいます。

補足情報（FW/ツールのバージョンなど）

プログラミング初心者です。できるだけ易しく教えていただけると嬉しいです。なにか抜けているところがあればご指摘ください。

行動規範の内容に同意します

回答1件

ベストアンサー

changeImage() を以下のようにしてみてください。

javascript
1    function changeImage(num) {
2        if(current + num >= 0 && current + num < backgroundImage.length) {
3            current += num;
4            document.getElementById('background').src = backgroundImage[current];
5        }
6        else if(current + num >= backgroundImage.length) {
7            current = 0;
8            document.getElementById('background').src = backgroundImage[current];
9        }
10        else if(current + num < 0) {
11            current = backgroundImage.length - 1;
12            document.getElementById('background').src = backgroundImage[current];
13        }
14    };
15