Is it possible to loop through a switch statement

I am making a standard slider which has two buttons to go through the images. However I want to make it modular. So that the end user can add 200 images if they like. I use Jquery to hide and show the images. But I don’t want to write 200 if statement, so I used a switch and wanted to loop through that switch which changes the cases active slide to display and hide the other element and stops if the amount of items has been reached.

But I have been having some issues, is there someone more experienced than me that can help

$('.slider-wrap').each( function() {
            let itemsAmount =  $('.slider-img', $(this)).length;
            console.log(itemsAmount);
        });


        let currentPic = 0;

        $('.sliderbuttonPlus').on('click', () => {
            currentPic++;

            let itemsAmount =  $('.slider-img', $('.slider-wrap')).length;
                        
            switch(currentPic) {

                case 0:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-0').css('display', 'block');
                break;

                case 1:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-1').css('display', 'block');
                break;

                case 2:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-2').css('display', 'block');
                break;

                case 3:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-3').css('display', 'block');
                break;

                case 4:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-4').css('display', 'block');
                break;

                case 5:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-5').css('display', 'block');
                break; 

                case 6:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-6').css('display', 'block');
                break;

                case 7:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-7').css('display', 'block');
                break;

                case 8:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-8').css('display', 'block');
                break;
                
                case 9:
                    $('.slider-img').css('display', 'none');
                    $('#slider-block-image-9').css('display', 'block');
                break;

            }   
                if(currentPic > itemsAmount) {
                        currentPic = itemsAmount;
                };

                console.log(currentPic);
        });
    

        $('.sliderbuttonMinus').on('click', () => {
            currentPic--;

        switch(currentPic) {
            case 0:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-0').css('display', 'block');
            break;
            case 1:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-1').css('display', 'block');
            break;
            case 2:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-2').css('display', 'block');
            break;
            case 3:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-3').css('display', 'block');
            break;
            case 4:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-4').css('display', 'block');
            break;
            case 5:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-5').css('display', 'block');
            break;   
            case 6:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-6').css('display', 'block');
            break;
            case 7:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-7').css('display', 'block');
            break;
            case 8:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-8').css('display', 'block');
            break;
            case 9:
                $('.slider-img').css('display', 'none');
                $('#slider-block-image-9').css('display', 'block');
            break;

        } 
        
        if (currentPic <= 0){
            currentPic = 0;
        };   
            console.log(currentPic);
        });

        if (currentPic === 0) {

            $('.slider-img').css('display', 'none');
            $('#slider-block-image-0').css('display', 'block');
            
        } 

        console.log(currentPic);     

    });

HTML displayed on the site

<div class="slider-wrap">
    <div class="button-wrap">
        <button class="sliderbuttonMinus">Links</button>
    </div>


        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/warhammer-1.jpg" alt="" id="slider-block-image-0" style="display: block;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/xcom-1.jpg" alt="" id="slider-block-image-1" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Skyrim-1.jpg" alt="" id="slider-block-image-2" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Skylines-1.jpg" alt="" id="slider-block-image-3" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Sea-of-thieves-1.jpg" alt="" id="slider-block-image-4" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Mario-1.jpg" alt="" id="slider-block-image-5" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Minecraft-1.jpg" alt="" id="slider-block-image-6" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Overwatch-1.jpg" alt="" id="slider-block-image-7" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/Half-life-1.jpg" alt="" id="slider-block-image-8" style="display: none;">


        
        <img class="slider-img" src="https://zelfbouwcontainer.online/wp-content/uploads/2021/11/hearthstone-1.jpg" alt="" id="slider-block-image-9" style="display: none;">


         <div class="button-wrap">      
        <button class="sliderbuttonPlus">Rechts</button>
    </div>     
</div>

PHP

<div class="slider-wrap">
    <div class="button-wrap">
        <button class="sliderbuttonMinus">Links</button>
    </div>

<?php
// Check rows exists.
if( have_rows('afbeeldingen_slider') ):

    $x = 0;
    // Loop through rows.
    while( have_rows('afbeeldingen_slider') ) : the_row();

        // Load sub field value.
        $image = get_sub_field('slider_image');
        $image_url = $image['url'];
        $image_alt = $image['alt'];
        ?>

        <img class="slider-img" src="<?php echo $image_url; ?>" alt="<?php echo $image_alt; ?>" id="slider-block-image-<?php echo $x?>">


        <?php
        // Do something...
        $x++;
    // End loop.
    endwhile;

// No value.
else :
    // Do something...
endif;


?> <div class="button-wrap">      
        <button class="sliderbuttonPlus">Rechts</button>
    </div>     
</div>