有没有办法减少小屏幕上显示的单选按钮数量，然后循环显示它们？

Question

这是我第一次发帖，希望我遵守所有准则。如果没有，对不起！

我正在尝试创建具有以下规格的响应式网站设计：
1.大背景图，不变
2. 下面一组（尚未确定数量）单选（？）按钮
-> 按钮需要互斥
3. 图像叠加一些文字，按下相应的单选按钮时会发生变化
4. 在移动模式下，只应同时显示两个按钮，并且会出现两个箭头，在所有可能的按钮之间循环。

我的问题从 4 开始):
- 我不知道从哪里开始
- 我不知道是否有这种行为的名称，我根本没听说过（这让谷歌搜索有点困难^^）

我想到了 Flex-boxes，但我所能做的就是包裹按钮，但这与隐藏它们并不完全相同。我也考虑过让按钮简单地消失（显示：none），但我不太确定如何做到这一点。（也许为 bootstrap 类添加额外的规则？）

最重要的是，设计需要以这样一种方式进行布局，即客户可以决定有多少个按钮，例如我无法事先知道有多少，也无法通过添加特定的类.

来对它们进行分组

唉，我的问题是：我可以在滑块页面上动态嵌入单选按钮，我可以滚动浏览它，但前提是它在小屏幕上吗？（我的猜测是，这不是一件简单的css事情）

编辑：指定问题

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://kit.fontawesome.com/82bfdd8cdc.js"></script>
</head>
<body>
  <div class="">
    <div class="bg-screen">
      <img src="img/test.jfif" alt="  " class="bg-screen-img">
      <div class="bg-screen-textarea">
      </div>
      <p class="bg-screen-text dummy"></p>
      <div class="radio">
        <label>
          <input type="radio" name="radio" />
          <div class="radio-box box-1">
            <i class="fas fa-socks fa-3x"></i>
            <span>Choice 1</span>
          </div>
          <div class="bg-screen-text text-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla at volutpat diam ut venenatis tellus. Odio ut sem nulla pharetra diam sit
            amet. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</div>
        </label>
        <label>
          <input type="radio" name="radio" />
          <div class="radio-box box-2">
            <i class="fas fa-user-tie fa-3x"></i>
            <span>Choice 2</span>
          </div>
          <div class="bg-screen-text text-2">Sit amet facilisis magna etiam tempor orci eu lobortis. Consectetur lorem donec massa sapien faucibus et molestie ac feugiat.
          </div>
        </label>
        <label>
          <input type="radio" name="radio" />
          <div class="radio-box box-3">
            <i class="fas fa-building fa-3x"></i>
            <span>Choice 3</span>
          </div>
          <p class="bg-screen-text text-3">Risus ultricies tristique nulla aliquet enim tortor at auctor urna.</p>
        </label>
        <label>
          <input type="radio" name="radio" />
          <div class="radio-box box-4">
            <i class="fas fa-building fa-3x"></i>
            <span>Choice 4</span>
          </div>
          <p class="bg-screen-text text-4">Fringilla ut morbi tincidunt augue. Velit euismod in pellentesque massa placerat duis ultricies lacus. </p>
        </label>
        <label>
          <input type="radio" name="radio" />
          <div class="radio-box box-5">
            <i class="fas fa-building fa-3x"></i>
            <span>Choice 5</span>
          </div>

          <p class="bg-screen-text text-5">Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam.</p>
        </label>
      </div>
    </div>
  </div>
</body>
</html>

input {
  display: none;
}

input+div{
  background: rgba(76, 175, 80, 0.3);
  border: 1px solid grey;
}

input:checked+div {
  background-color: green;
}

label {
  display: inline-block;
  margin: 0 1%;
}

/*removing clickability of text itself inside the labels for the radio-buttons*/
label span {
  /* Firefox */
  -moz-user-select: none;
  /* Internet Explorer */
  -ms-user-select: none;
  /* KHTML browsers (e.g. Konqueror) */
  -khtml-user-select: none;
  /* Chrome, Safari, and Opera */
  -webkit-user-select: none;
  /* Disable Android and iOS callouts*/
  -webkit-touch-callout: none;
}

label div i{
  margin: 15% auto;
}

input:checked~.bg-screen-text {
  display: inline-block;
  margin: -25% 10%;
  text-align: center;
  color: white;
}

.bg-screen{
  width: 100%;
  text-align: center;
}
.bg-screen-img{
  margin: 3% 7%;
  height: 25%;
  background-color: grey;
}

.bg-screen-text {
  display: none;
  position: absolute;
  text-align: center;
  left: 7%;
  right:7%;
  margin: 0 10%;
}

.radio {
  position: relative;
  top: -150px;
  margin: 3% 7%;
  text-align: center;
}

.radio-box {
  position: relative;
  height: 170px;
  width: 170px;
  display: inline-block;
  text-align: center;
}

.radio-box span {
  position: absolute;
  transform: translate(0, 90px);
  left: 0;
  right: 0;
}

Answer 1

谢谢！

我在 slick carousel 的帮助下让它工作。 (https://github.com/kenwheeler/slick/) 这几乎为我提供了所有功能，而无需自己编写代码。

有没有办法减少小屏幕上显示的单选按钮数量，然后循环显示它们？

Is there a way to reduce the amount of radio buttons shown on smaller screens and then cycle through them?

css

radio-button

responsive