html css javascript スライドショーについて

実現したいこと

最後のスライド写真の時、次へ（＞）ボタンを押すと
最初の写真に戻るようにしたい。

前提

無し

発生している問題・エラーメッセージ

無し

該当のソースコード

<body>

    <div class="hscroll">
        <ul>
            <li><img src="img/as002.jpg"></li>
            <li><img src="img/as003.jpg"></li>
            <li><img src="img/as004.jpg"></li>
        </ul>
        <span class="arrow left"></span>
        <span class="arrow right"></span>
    </div>

    <script>
        document.querySelectorAll('.left').forEach(elm => {
            elm.onclick = function () {
                let ul = elm.parentNode.querySelector('ul');
                ul.scrollLeft -= ul.clientWidth;
            };
        });
        document.querySelectorAll('.right').forEach(elm => {
            elm.onclick = function () {
                let ul = elm.parentNode.querySelector('ul');
                ul.scrollLeft += ul.clientWidth;
            };
        });
    </script>

</body>

試したこと

無し

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

html
css
javascript

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

回答1件

スクロールオフセットが範囲外になったら0に戻せば良いので、

js
1let ul = elm.parentNode.querySelector('ul');
2// ul.scrollLeft += ul.clientWidth;
3const newOffset = ul.scrollLeft + ul.clientWidth;
4ul.scrollLeft = newOffset >= ul.scrollWidth ? 0 : newOffset;