ポップアップ画像「次へ」「前へ」ボタンで切り替えたい

Question

実現したい事→ポップアップの「前へ」ボタンをクリックで１つ前の画像へ、「次へ」ボタンをクリックで１つ後の画像へポップアップ画像が切り替わるようにしたい。（最後のポップアップ画像の「次へ」クリックで最初のポップアップ画像にもしたい、つまりループ状態にしたい）ここでは前へが←、次へが→になってます。

ご教授していただきたいこと→JavaScriptを用いての実現方法（「このjsをインストールしてクラス名、id名を指定のものにすればできる」などではなく、どのような原理で画像が切り替わっているかがわかる形でご教授していただけると嬉しいです）。

google,youtubeなどで調べてみましたが具体出来な解決策が見当たらず、皆様にお力を貸していただきたく、質問させていただきました。
現状ポップアップのクローズボタンで閉じる、画像クリックでポップアップ表示は機能しています。余分なコードは消しています（<li><img></li>の数を14→6に）。

        <div id="popup-img" class="default">
            <img src="./images/image/1.jpg" alt="ポップアップ">
            <section class="popup-bar">
                <div id="popup-close-btn" class="popup-close-btn"><i class="fas fa-times-circle"></i></div>
                <div class="popup-change-btn">
                    <div id="popup-before-btn" class="change-btn"><i class="fas fa-chevron-circle-left"></i></div>
                    <div id="popup-after-btn" class="change-btn"><i class="fas fa-chevron-circle-right"></i></div>
                </div>
            </section>
        </div>
        <ul id="containers-p" class="containers-p">
            <li class="container-p"><img class="pop_trigger" src="./images/image/1.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="./images/image/2.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="./images/image/3.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="./images/image/4.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="./images/image/5.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="./images/image/6.jpg" alt=""></li>
        </ul>

.containers-p{
    display: flex;
    flex-wrap: wrap;
    margin: 0 2rem 0 2rem;
    justify-content: space-between;
}
.container-p{
    margin: auto 0;
    flex-direction: row;
    width: 49.7%;
    margin-bottom: 0.2rem;
    object-fit: cover;
    list-style: none;
    transition: all 0.6s;
    display: block;
}
.container-p img{
    display: block;
}

/* popup編集 */
#popup-img.default{
    display: none;
}
#popup-img.active{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    z-index: 30;
    height: -webkit-fill-available;
    background-color: #fff;
}
#popup-img img{
    height: fit-content;
    width: -webkit-fill-available;
    margin: auto 4rem;
}
.popup-close-btn{
    position: relative;
    height: fit-content;
    cursor: pointer;
    font-size: 3rem;
}
.popup-bar{
    position: absolute;
    bottom: 0;
    display: flex;
    width: -webkit-fill-available;
    height: 5rem;
    justify-content: space-between;
    margin: 0 2rem;
}
.popup-change-btn{
    display: flex;
    height: fit-content;
}
.change-btn{
    font-size: 3rem;
}
#popup-before-btn{
    margin-right: 2.5rem;
}

$(function() {
  $("#containers-p img").on("click", function () {
    let img_src = $(this).attr("src");
    $("#popup-img img").attr("src", img_src);
    $("#popup-img").toggleClass('active');
  });
});

$(function() {
  $("#popup-close-btn").on("click", function () {
    $("#popup-img").removeClass('active');
  });
});

Comments

[yambejp]

現時点で何も表示されないと思いますが？

[pokemon]

確認しました。CSSの.container-pのdisplayをnoneにしていました。（本来は非表示→ボタンクリックでcontainer-pに.activeクラスを追加して表示するため）
見やすいように不要部分（.container.active{ display: block;}）を省いてしまってました。
これで表示されたと思います。お手数おかけしてしまい、申し訳ありません。

[yambejp]

codepenに転記しましたが相変わらずおかしいです。
なにをしたらどうなる想定なのでしょうか？

https://codepen.io/yambejp/pen/xxpjZjr