Is it possible to loop through a switch statement-CodePudding

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 >
    <div >
        <button >Links</button>
    </div>


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


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


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


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


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


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


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


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


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


         <div >      
        <button >Rechts</button>
    </div>     
</div>

PHP

<div >
    <div >
        <button >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  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 >      
        <button >Rechts</button>
    </div>     
</div>

CodePudding user response：

You need only one part, with a dynamic index or indicator of the picture.

$('.slider-img').css('display', 'none');
$('#slider-block-image-'   currentPic).css('display', 'block');
//                      ^^^^^^^^^^^^^

CodePudding user response：

As an alternative to the hardcoded img elements within the HTML and the repetitive declarations within the javascript/jQuery code you could, as I suggested, use an array to power the entire slideshow. With an array you need simply add additional img sources and it should then run with no additional coding. This was hastily written in vanilla js

// the index that points to current active picture
let cpic=0;

const d=document;
const parent = d.querySelector('div.slider-wrap');
const child = parent.firstElementChild;
const _CN='active';

const insertafter = (node, ref) => {
  ref.parentNode.insertBefore(node, ref.nextSibling)
};

// modify the global index variable `cpic`
// depending upon which button was clicked.
const clickhandler=function(e){
  switch( this.dataset.dir ){
    case 'minus':cpic--;break;
    case 'plus':cpic  ;break;
  }
  if( cpic < 0 )cpic=images.length - 1;
  if( cpic > images.length - 1 )cpic=0;
  /*
    remove active class from all images
    and add to currently selected
  */
  parent.querySelectorAll('img').forEach((img,i)=>{
    img.classList.remove(_CN);
    if( i==cpic )img.classList.add(_CN);
  })
};



const path = 'https://zelfbouwcontainer.online/wp-content/';
/*
  This array powers the slide show. Add as many items
  to it as needed.
*/
const images = [
  '/uploads/2021/11/warhammer-1.jpg',
  '/uploads/2021/11/xcom-1.jpg',
  '/uploads/2021/11/Skyrim-1.jpg',
  '/uploads/2021/11/Skylines-1.jpg',
  '/uploads/2021/11/Sea-of-thieves-1.jpg',
  '/uploads/2021/11/Mario-1.jpg',
  '/uploads/2021/11/Minecraft-1.jpg',
  '/uploads/2021/11/Overwatch-1.jpg',
  '/uploads/2021/11/Half-life-1.jpg',
  '/uploads/2021/11/hearthstone-1.jpg'
];

/* dynamically add all images to the page, hidden based upn css class */
images.forEach((src, i) => {
  let img = new Image();
  img.src = path   src;
  img.className = 'slider-img';
  img.id = 'slider-block-image-'   i;
  img.dataset.id = i;

  insertafter(img, child)
});

/* set the first image visible */
parent.querySelector('img:first-of-type').classList.add(_CN);



d.querySelectorAll('button[data-dir]').forEach(bttn=>bttn.addEventListener('click',clickhandler));

.slider-wrap img{
  display:none;
}
.slider-wrap img.active{
  display:block;
}

<div >
  <div >
    <button data-dir='minus' >Links</button>
  </div>
  <!-- dynamically add images here from array -->
  <div >
    <button data-dir='plus' >Rechts</button>
  </div>
</div>