我有以下 html 和 javascript 代码，其中有一个带有五张幻灯片的滑块 我需要在每次加载页面时随机选择五张幻灯片中的三张，并且未选择的两张幻灯片将被完全隐藏。 感谢您告诉我我的代码问题出在哪里？

我尝试了以下代码，但所有五张幻灯片都显示每次加载页面时，其中三张幻灯片随机有内容，两张是空的。 我需要不显示那两张空白幻灯片

const slogans = Array.from(document.querySelectorAll('.slogan'));
const nonEmptySlogans = slogans.filter(slogan => slogan.innerHTML.trim() !== '');

if (nonEmptySlogans.length >= 3) {
  const selectedSlogans = [];

  while (selectedSlogans.length < 3) {
    const randomIndex = Math.floor(Math.random() * nonEmptySlogans.length);
    const randomSlogan = nonEmptySlogans.splice(randomIndex, 1)[0];
    selectedSlogans.push(randomSlogan);
    randomSlogan.style.display = 'block';
  }
}
'use strict'
var testim = document.getElementById("testim"),
  testimDots = Array.prototype.slice.call(document.getElementById("testim-dots").children),
  testimContent = Array.prototype.slice.call(document.getElementById("testim-content").children),
  testimLeftArrow = document.getElementById("left-arrow"),
  testimRightArrow = document.getElementById("right-arrow"),
  testimSpeed = 4500,
  currentSlide = 0,
  currentActive = 0,
  testimTimer,
  touchStartPos,
  touchEndPos,
  touchPosDiff,
  ignoreTouch = 30;;

window.onload = function() {

  // Testim Script
  function playSlide(slide) {
    for (var k = 0; k < testimDots.length; k++) {
      testimContent[k].classList.remove("active");
      testimContent[k].classList.remove("inactive");
      testimDots[k].classList.remove("active");
    }

    if (slide < 0) {
      slide = currentSlide = testimContent.length - 1;
    }

    if (slide > testimContent.length - 1) {
      slide = currentSlide = 0;
    }

    if (currentActive != currentSlide) {
      testimContent[currentActive].classList.add("inactive");
    }
    testimContent[slide].classList.add("active");
    testimDots[slide].classList.add("active");

    currentActive = currentSlide;

    clearTimeout(testimTimer);
    testimTimer = setTimeout(function() {
      playSlide(currentSlide += 1);
    }, testimSpeed)
  }

  testimLeftArrow.addEventListener("click", function() {
    playSlide(currentSlide -= 1);
  })

  testimRightArrow.addEventListener("click", function() {
    playSlide(currentSlide += 1);
  })

  for (var l = 0; l < testimDots.length; l++) {
    testimDots[l].addEventListener("click", function() {
      playSlide(currentSlide = testimDots.indexOf(this));
    })
  }

  playSlide(currentSlide);

  // keyboard shortcuts
  document.addEventListener("keyup", function(e) {
    switch (e.keyCode) {
      case 37:
        testimLeftArrow.click();
        break;

      case 39:
        testimRightArrow.click();
        break;

      case 39:
        testimRightArrow.click();
        break;

      default:
        break;
    }
  })

  testim.addEventListener("touchstart", function(e) {
    touchStartPos = e.changedTouches[0].clientX;
  })

  testim.addEventListener("touchend", function(e) {
    touchEndPos = e.changedTouches[0].clientX;

    touchPosDiff = touchStartPos - touchEndPos;

    console.log(touchPosDiff);
    console.log(touchStartPos);
    console.log(touchEndPos);


    if (touchPosDiff > 0 + ignoreTouch) {
      testimLeftArrow.click();
    } else if (touchPosDiff < 0 - ignoreTouch) {
      testimRightArrow.click();
    } else {
      return;
    }

  })
}

  

    

      


        
        
        

          

          
          

          
          

          
          

          
          

        
        


          

            
"How does visual identity design help business/product value grow?"
            
MINE
          

          

            
"How can we analyze ourselves, audience, competitors, and market and help business progress/grow?"
            
MINE
          

          

            
"How can I differentiate my business from others?"
            
MINE
          

          

            
"What is the best and latest business model and plan for me?"
            
MINE
          

          

            
"How will innovative targeting be achieved at each stage of business?"
            
MINE