我可以想象它会变得有点混乱。你基本上需要在每个必要的组件上添加第四个和第五个。首先，您必须添加两个输入。我将给予第四张幻灯片的示例，但请记住，第五张幻灯片的需要是相同的。
将id更改为相应的数字。

<input type="radio" name="slider" id="item-4">

字符串
接下来，您给每张幻灯片加了标签。也为每个人添加一个。请确保将for和id更改为相应的编号。

<label class="card" for="item-4" id="song-4">
   <img src="image.png" alt="song">
</label>

型
之后，您为歌曲添加了一个标签。在那里做同样的事情。你需要复制整个标签，并再次更改id，当然还有标题，副标题和时间。

<label class="song-info" id="song-info-4">
  <div class="title">Song title 4</div>
  <div class="sub-line">
    <div class="subtitle">Artist 4</div>
    <div class="time">2.00</div>
  </div>
</label>

型
这就是HTML部分。现在是CSS。有四个地方需要改变。其中三个人像这样调用所有三张幻灯片：

#item-1:checked ~ .cards #song-3, 
#item-2:checked ~ .cards #song-1, 
#item-3:checked ~ .cards #song-2 {
     transform: translatex(-40%) scale(.8);
     opacity: .4;
     z-index: 0; }
        
#item-1:checked ~ .cards #song-2, 
#item-2:checked ~ .cards #song-3, 
#item-3:checked ~ .cards #song-1 {
          transform: translatex(40%) scale(.8);
          opacity: .4;
          z-index: 0; }
        
#item-1:checked ~ .cards #song-1, 
#item-2:checked ~ .cards #song-2, 
#item-3:checked ~ .cards #song-3 {
          transform: translatex(0) scale(1);
          opacity: 1;
          z-index: 1;

型
您还需要将#item-4和#item-5添加到这三个列表中。如您所见，第一段代码将#item-1链接到#song-3，因为这是当前的最后一张幻灯片。您需要将其更改为#song-5。第二个代码位也是如此，其中#item-3引用#song-1，现在必须变成song-4等等，因为现在是下一个，因为添加了幻灯片。第三个似乎不言自明。
最后，您必须为#item-4和#item-5添加以下代码，并在转换中进行更改。其他两个之间的差距是40 px，所以4和5应该是120和160 px。

#item-4:checked ~ .player #test  {
  transform: translateY(-120px);
}

型
如果应用正确，这应该有效。我自己在codepen here中试过这个，如果你卡住了，你可以检查一下。我建议你先根据我的解释试试。我希望这是你在美学上想要的效果，这由你来决定。这至少会给予你一个正确的方向！

我们来传送带5张卡片：codepen

<div class="container">
  <input type="radio" name="slider" id="item-1" checked />
  <input type="radio" name="slider" id="item-2" />
  <input type="radio" name="slider" id="item-3" />
  <input type="radio" name="slider" id="item-4" />
  <input type="radio" name="slider" id="item-5" />
  <div class="cards">
    <label class="card" for="item-1" id="song-1">
      <img src="https://images.unsplash.com/photo-1530651788726-1dbf58eeef1f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=882&q=80" alt="song" />
    </label>
    <label class="card" for="item-2" id="song-2">
      <img src="https://images.unsplash.com/photo-1559386484-97dfc0e15539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80" alt="song" />
    </label>
    <label class="card" for="item-3" id="song-3">
      <img src="https://images.unsplash.com/photo-1533461502717-83546f485d24?ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="song" />
    </label>
    <label class="card" for="item-4" id="song-4">
      <img src="https://images.unsplash.com/photo-1581833971358-2c8b550f87b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80" alt="song" />
    </label>
    <label class="card" for="item-5" id="song-5">
      <img src="https://images.unsplash.com/photo-1597851065532-055f97d12e47?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="song" />
    </label>
  </div>
  <div class="player">
    <div class="upper-part">
      <div class="play-icon">
        <svg width="20" height="20" fill="#2992dc" stroke="#2992dc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-play" viewBox="0 0 24 24">
          <defs />
          <path d="M5 3l14 9-14 9V3z" />
        </svg>
      </div>
      <div class="info-area" id="test">
        <label class="song-info" id="song-info-1">
          <div class="title">Bunker</div>
          <div class="sub-line">
            <div class="subtitle">Balthazar</div>
            <div class="time">4.05</div>
          </div>
        </label>
        <label class="song-info" id="song-info-2">
          <div class="title">Words Remain</div>
          <div class="sub-line">
            <div class="subtitle">Moderator</div>
            <div class="time">4.05</div>
          </div>
        </label>
        <label class="song-info" id="song-info-3">
          <div class="title">Falling Out</div>
          <div class="sub-line">
            <div class="subtitle">Otzeki</div>
            <div class="time">4.05</div>
          </div>
        </label>
        <label class="song-info" id="song-info-4">
          <div class="title">img 4</div>
          <div class="sub-line">
            <div class="subtitle">img 4</div>
            <div class="time">4.05</div>
          </div>
        </label>
        <label class="song-info" id="song-info-5">
          <div class="title">img 5</div>
          <div class="sub-line">
            <div class="subtitle">img 5</div>
            <div class="time">4.05</div>
          </div>
        </label>
      </div>
    </div>
    <div class="progress-bar">
      <span class="progress"></span>
    </div>
  </div>
</div>

个字符