动态控制幻灯片显示：JavaScript随机选择与CSS隐藏策略

/**
 * 生成一个指定范围内的随机整数。
 * @param {number} count - 随机数的上限（不包含）。
 * @returns {number} 随机整数。
 */
const getRandomNumber = count => Math.floor(Math.random() * count);

/**
 * 生成指定长度的、不重复的随机数数组。
 * @param {number} len - 需要生成的随机数数量。
 * @param {number} count - 随机数的上限（不包含），即总元素数量。
 * @returns {number[]} 包含唯一随机数的数组。
 */
const randomNumbers = (len, count) => {
  const numbers = new Set(); // 使用 Set 确保生成的数字是唯一的
  while (numbers.size < len) {
    numbers.add(getRandomNumber(count));
  }
  return [...numbers]; // 将 Set 转换为数组
};

// 获取所有幻灯片元素
const slogans = [...document.querySelectorAll('.slogan')];

// 确保有足够的幻灯片可供选择（至少3张）
if (slogans.length >= 3) {
  // 生成3个随机的、不重复的幻灯片索引
  const showListIndices = randomNumbers(3, slogans.length);
  // 将索引数组转换为 Set，以便后续快速查找
  const showListSet = new Set(showListIndices);

  // 遍历所有幻灯片，根据索引决定是否添加 'show' 类
  slogans.forEach((slogan, i) => {
    // 如果当前幻灯片的索引在随机选择的集合中，则添加 'show' 类，否则移除
    slogan.classList.toggle("show", showListSet.has(i));
  });
}

.slogan {
  display: none; /* 默认情况下，所有幻灯片都隐藏 */
}

.slogan.show {
  display: block; /* 带有 'show' 类的幻灯片显示为块级元素 */
}

window.onload = function() {
  // --- 幻灯片随机选择逻辑开始 ---
  const getRandomNumber = count => Math.floor(Math.random() * count);
  const randomNumbers = (len, count) => {
    const numbers = new Set();
    while (numbers.size < len) {
      numbers.add(getRandomNumber(count));
    }
    return [...numbers];
  };

  const slogans = [...document.querySelectorAll('.slogan')];

  if (slogans.length >= 3) {
    const showListIndices = randomNumbers(3, slogans.length);
    const showListSet = new Set(showListIndices);

    slogans.forEach((slogan, i) => {
      slogan.classList.toggle("show", showListSet.has(i));
    });
  }
  // --- 幻灯片随机选择逻辑结束 ---

  // --- 原有滑块脚本开始 ---
  '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;

  // 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); // 滑块初始化，此时DOM元素已经过随机选择处理

  // 键盘快捷键和触摸事件...
  document.addEventListener("keyup", function(e) {
    switch (e.keyCode) {
      case 37:
        testimLeftArrow.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;

    if (touchPosDiff > 0 + ignoreTouch) {
      testimLeftArrow.click();
    } else if (touchPosDiff < 0 - ignoreTouch) {
      testimRightArrow.click();
    } else {
      return;
    }
  });
  // --- 原有滑块脚本结束 ---
};

<div class="container">
  <section id="testim" class="testim">
    <div class="testim-cover">
      <div class="wrap">
        <span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
        <span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
        <ul id="testim-dots" class="dots">
          <li class="dot active"></li>
          <li class="dot"></li>
          <li class="dot"></li>
          <li class="dot"></li>
          <li class="dot"></li>
        </ul>
        <div id="testim-content" class="cont">
          <div class="slogan">
            <p>"How does visual identity design help business/product value grow?"</p>
            <h2>MINE</h2>
          </div>
          <div class="slogan">
            <p>"How can we analyze ourselves,