images.forEach((image, index) => {
    const img = document.createElement('img');
    img.src = image;

→ ① forEach で <img src=" "> を 0 ～ 7 番目の 8 つつくりました。

    const li = document.createElement('li');

→ ② li 要素をつくりました。li を定数にしただけで上の forEach とは関係ないように思います。

    if (index === currentIndex) {
      li.classList.add('current');
    }

→ ③ index が 0（ img が 0 番目）のとき、li の 0 番目に current クラスをつける。
ここではまだ li が img の親要素だと宣言していないのにどうして img の 0 番目が li の 0 番目と認識するのでしょうか？
この下で appendchild で宣言してるので、その後にこの if 文を持ってきたほうがいいのかと思い移動させてみましたらうまくいってました。同じ forEach 文の中では人が読みやすくする必要はあるが順番はどうでもいいのでしょうか？
それでこの if 文を const img = document.createElement('img'); の上にもってきましたらだめでした。やはり順番があるみたいですね。
ということは①で一度に <img src=" "> を 8 つつくるのではなく 1 つつくり下までいき、次の <img をつくるのかなと考えました。
それでもやはりまだ li が img の親要素だと宣言していないのにどうして img の 0 番目が li の 0 番目と認識するのかがわかりません。

    li.appendChild(img);
    document.querySelector('.thumbnails').appendChild(li);

→ ④ li の子要素は img 、thumbnails の子要素は li

＊同じような質問がありましたが、回答を読んでもよくわかりませんでした。