Implementation result chart:
                 

Simply realize the browsing and viewing of photos. The number of photos is based on the number of photos you read. In my example, I read 5 photos.

The view structure consists of a main display image block and a photo directory block. There are multiple photo directories, depending on the width and preference. In the example, I put three. The picture in the middle of the catalog should be the same as the one shown in the main display block (excluding the first and last of course).

html code implementation:

<div class="show-part">
    <div class="show-singel">
        <div class="show-oth">
            <img src="../imgs/pre.png" id="pre">
        </div>
        <div class="show-now" id="show">
            <img src="">
        </div>
        <div class="show-oth">
            <img src="../imgs/next.png" id="next">
        </div>
    </div>
    <div class="show-all">
        <div class="item" id="item1">
            <img src="">
        </div>
        <div class="item" id="item2">
            <img src="">
        </div>
        <div class="item" id="item3">
            <img src="">
        </div>
    </div>
</div>
<script src="../js/show.js"></script>

I don't want to paste css. I'll directly paste the logic implementation of js

js code implementation:

nowId = 1;

window.onload = function() {
    changeCat();
    var area = document.getElementById('show');
    var item = area.getElementsByTagName('img')[0];
    item.src = "../imgs/" + imgs[nowId-1].name;
};

// Catalog flow
function changeCat() {
    if(imgs.length > 3) {
        if(nowId > 1 && nowId < imgs.length) {
            for(var i = 1; i <= 3; i++) {
                var area = document.getElementById('item'+i);
                var item = area.getElementsByTagName('img')[0];
                item.src = "../imgs/" + imgs[nowId-(3-i)].name;
            }
        } else {
            if(nowId == 1) {
                for(var i = 1; i <= 3; i++) {
                    var area = document.getElementById('item'+i);
                    var item = area.getElementsByTagName('img')[0];
                    item.src = "../imgs/" + imgs[i-1].name;
                }
            }
        }
    }
}

// Change main display photo
function changeShow(num) {
    var tem = nowId-(2-num);
    if(nowId == 1 || nowId == imgs.length) {
        if(nowId == 1) {
            tem = num;
        } else {
            tem = nowId-(3-num);
        }
    }
    var area = document.getElementById('show');
    var item = area.getElementsByTagName('img')[0];
    item.src = "../imgs/" + imgs[tem-1].name;
    nowId = tem;
    changeCat();
}

//Previous icon click event
document.getElementById('pre').onclick = function() {
    if(nowId == 1) {
        return ;
    }
    if(nowId == imgs.length) {
        changeShow(2);
        return ;
    }
    changeShow(1);
};

//Next Icon click event
document.getElementById('next').onclick = function() {
    if(nowId == 1) {
        changeShow(2);
        return ;
    }
    if(nowId == imgs.length) {
        return ;
    }
    changeShow(3);
};

// Catalog Photo View
function showImg() {
    // Here, the background data reception is simulated, and the total number of display photos is determined by the number received
    imgs = [
        {'id': 1, 'name': 'pic1.jpeg'},
        {'id': 2, 'name': 'pic2.jpg'},
        {'id': 3, 'name': 'pic3.jpeg'},
        {'id': 4, 'name': 'pic4.jpeg'},
        {'id': 5, 'name': 'pic5.png'}
    ];

    for(var i = 0; i < 3; i++) {
        let item = i+1;
        document.getElementById('item'+item).onclick = function() {
            changeShow(item);
        };
    }
}

showImg();

Two icons are used:

That's about it. Please give me more advice^