Javascript 使用HTML和CSS的滑块

所以我一直在尝试用HTML和CSS制作一个滑块，我遇到了这个问题，第二张幻灯片显示了第三个img

当我在第三张幻灯片中单击时，它会一直冲到最后。我尝试过很多不同的方法，甚至尝试过使用列表，但我认为这是最好的方法。我想要一些建议和帮助，IDK我如何可以解决这个问题，或者我如何可以得到一个工作滑块。非常感谢。 ps：我还没有完成它，我还计划用Javascript做一个自动滑块

@导入url（'https://fonts.googleapis.com/css2?family=Noto+Sans+JP：wght@100；400&display=swap'）；
img{
宽度：800px；
高度：500px；
}
身体{
保证金：0；
填充：0；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景#f5fff5；
}
.滑块{
宽度：800px；
高度：500px；
边界半径：10px；
溢出：隐藏；
}
.幻灯片{
宽度：500%；
高度：500px；
显示器：flex；
}
.幻灯片输入{
显示：无；
}
.幻灯片{
宽度：20%；
过渡：2s；
}
.幻灯片图像{
宽度：800px；
高度：500px；
}
.导航手册{
位置：绝对位置；
宽度：800px；
利润上限：-40px；
显示器：flex；
证明内容：中心；
}
.手动btn{
边框：2px实心#e6ffe6；
填充物：5px；
边界半径：10px；
光标：指针；
过渡：1s；
}
.手动btn:非（：最后一个孩子）{
右边距：40px；
}
.手动btn：悬停{
背景：#6；
}
#radio1:已选中~。首先{
左边距：0；
}
#无线电2：已检查~。首先{
左边缘：-10%；
}
#无线电3：已检查~。首先{
左边缘：-20%；
}
#无线电4：已检查~。首先{
左边缘：-30%；
}
#无线电5：已检查~。首先{
左边缘：-40%；
}
#无线电6：已检查~。首先{
左边缘：-50%；
}
#无线电7：已检查~。首先{
左边缘：-60%；
}
#无线电8：已检查~。首先{
左边缘：-70%；
}
.自动导航{
位置：绝对位置；
显示器：flex；
宽度：800px；
证明内容：中心；
边缘顶部：460像素；
}
.导航自动分区{
边框：2px实心#e6ffe6；
填充物：5px；
边界半径：10px；
光标：指针；
过渡：1s；
}
.导航自动分区：非（：最后一个子项）{
右边距：40px；
}
#收音机1:选中~.navigation-auto.auto-btn1{
背景：#6；
}
#收音机2：已选中~.navigation-auto.auto-btn2{
背景：#6；
}
#radio3:已选中~.navigation-auto.auto-btn3{
背景：#6；
}
#收音机4:已选中~.navigation-auto.auto-btn4{
背景：#6；
}
#收音机5:已选中~.navigation-auto.auto-btn5{
背景：#6；
}
#收音机6:已选中~.navigation-auto.auto-btn6{
背景：#6；
}
#radio7:选中~.navigation-auto.auto-btn7{
背景：#6；
}
#radio8:已选中~.navigation-auto.auto-btn8{
背景：#6；
}

---

您的图像div都具有相同的类

如果使用单独的类重命名div：first、second等。 然后将边距添加为图像宽度的倍数，如我所示，它将起作用

注意*当屏幕小于宽度时，它将不工作。如果你想让它在更小的屏幕上工作，你需要在图像大小和相关偏移量上使用一个百分比

不过做得很好

@导入url（'https://fonts.googleapis.com/css2?family=Noto+Sans+JP：wght@100；400&display=swap'）；
img{
宽度：800px；
高度：500px；
}
身体{
保证金：0；
填充：0；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景#f5fff5；
}
.滑块{
宽度：800px；
高度：500px；
边界半径：10px；
溢出：隐藏；
}
.幻灯片{
宽度：500%；
高度：500px；
显示器：flex；
}
.幻灯片输入{
显示：无；
}
.幻灯片{
宽度：20%；
过渡：2s；
}
.幻灯片图像{
宽度：800px；
高度：500px；
}
.导航手册{
位置：绝对位置；
宽度：800px；
利润上限：-40px；
显示器：flex；
证明内容：中心；
}
.手动btn{
边框：2px实心#e6ffe6；
填充物：5px；
边界半径：10px；
光标：指针；
过渡：1s；
}
.手动btn:非（：最后一个孩子）{
右边距：40px；
}
.手动btn：悬停{
背景：#6；
}
#radio1:已选中~。首先{
左边距：0；
}
#无线电2：已检查~。秒{
左边距：-1600px；
}
#第三台：已检查~第三台{
左边距：-2400像素；
}
#第四台：已检查~。第四台{
左边距：-3200px；
}
#第五台：已检查~。第五台{
左边距：-4000px；
}
#无线电6：已检查~。首先{
左边距：-50px；
}
#无线电7：已检查~。首先{
左边距：-60px；
}
#无线电8：已检查~。首先{
左边距：-70px；
}
.自动导航{
位置：绝对位置；
显示器：flex；
宽度：800px；
证明内容：中心；
边缘顶部：460像素；
}
.导航自动分区{
边框：2px实心#e6ffe6；
填充物：5px；
边界半径：10px；
光标：指针；
过渡：1s；
}
.导航自动分区：非（：最后一个子项）{
右边距：40px；
}
#收音机1:选中~.navigation-auto.auto-btn1{
背景：#6；
}
#收音机2：已选中~.navigation-auto.auto-btn2{
背景：#6；
}
#radio3:已选中~.navigation-auto.auto-btn3{
背景：#6；
}
#收音机4:已选中~.navigation-auto.auto-btn4{
背景：#6；
}
#收音机5:已选中~.navigation-auto.auto-btn5{
背景：#6；
}
#收音机6:已选中~.navigation-auto.auto-btn6{
背景：#6；
}
#radio7:选中~.navigation-auto.auto-btn7{
背景：#6；
}
#radio8:已选中~.navigation-auto.auto-btn8{
背景：#6；
}

        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400&display=swap');
img {
  width: 800px;
  height: 500px;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5fff5;
}

.slider {
  width: 800px;
  height: 500px;
  border-radius: 10px;
  overflow: hidden;
}

.slides {
  width: 500%;
  height: 500px;
  display: flex;
}

.slides input {
  display: none; 
}

.slides input#radio1{left: 0px; }
.slides input#radio2{left: 20px; }
.slides input#radio3{left: 40px; }
.slides input#radio4{left: 60px; }
.slides input#radio5{left: 80px; }
.slides input#radio6{left: 100px; }
.slides input#radio7{left: 120px; }
.slides input#radio8{left: 140px; }

.slide {
  width: 20%;
  transition: 2s;
}

.slides_wrap {
  transition: 2s; display: flex;
}

.slide img {
  width: 800px;
  height: 500px;
}

.navigation-manual {
  position: absolute;
  width: 800px;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.manual-btn {
  border: 2px solid #e6ffe6;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.manual-btn:not(:last-child) {
  margin-right: 40px;
}

.manual-btn:hover {
  background: #e6ffe6;
}

#radio1:checked~.first {
  margin-left: 0;
}

/*#radio2:checked~.first {
  margin-left: -400px;
}

#radio3:checked~.first {
  margin-left: -800px;
}

#radio4:checked~.first {
  margin-left: -30px;
}

#radio5:checked~.first {
  margin-left: -40px;
}

#radio6:checked~.first {
  margin-left: -50px;
}

#radio7:checked~.first {
  margin-left: -60px;
}

#radio8:checked~.first {
  margin-left: -70px;
}*/

#radio1:checked~.slides_wrap {
  margin-left: 0;
}

#radio2:checked~.slides_wrap {
  margin-left: -800px;
}

#radio3:checked~.slides_wrap {
  margin-left: -1600px;
}

#radio4:checked~.slides_wrap {
  margin-left: -2400px;
}

#radio5:checked~.slides_wrap {
  margin-left: -3200px;
}

#radio6:checked~.slides_wrap {
  margin-left: -4000px;
}

#radio7:checked~.slides_wrap {
  margin-left: -4800px;
}

#radio8:checked~.slides_wrap {
  margin-left: -5600px;
}

.navigation-auto {
  position: absolute;
  display: flex;
  width: 800px;
  justify-content: center;
  margin-top: 460px;
}

.navigation-auto div {
  border: 2px solid #e6ffe6;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.navigation-auto div:not(:last-child) {
  margin-right: 40px;
}

#radio1:checked~.navigation-auto.auto-btn1 {
  background: #e6ffe6;
}

#radio2:checked~.navigation-auto.auto-btn2 {
  background: #e6ffe6;
}

#radio3:checked~.navigation-auto.auto-btn3 {
  background: #e6ffe6;
}

#radio4:checked~.navigation-auto.auto-btn4 {
  background: #e6ffe6;
}

#radio5:checked~.navigation-auto.auto-btn5 {
  background: #e6ffe6;
}

#radio6:checked~.navigation-auto.auto-btn6 {
  background: #e6ffe6;
}

#radio7:checked~.navigation-auto.auto-btn7 {
  background: #e6ffe6;
}

#radio8:checked~.navigation-auto.auto-btn8 {
  background: #e6ffe6;
}
    

<body>
  <div class="slider">
    <div class="slides">
      <input type="radio" name="radio-btn" id="radio1">
      <input type="radio" name="radio-btn" id="radio2">
      <input type="radio" name="radio-btn" id="radio3">
      <input type="radio" name="radio-btn" id="radio4">
      <input type="radio" name="radio-btn" id="radio5">
      <input type="radio" name="radio-btn" id="radio6">
      <input type="radio" name="radio-btn" id="radio7">
      <input type="radio" name="radio-btn" id="radio8">
      <div class="slides_wrap">
        <div class="slide first">
            <img src="https://i.picsum.photos/id/1069/800/500.jpg?hmac=cqS1B5uwu58phxn3aaReeQrihXW002te7WfO3aBskwE" alt="Imagem do Chalé">
          </div>
          <div class="slide first">
            <img src="https://i.picsum.photos/id/290/800/500.jpg?hmac=FYjq1vUp3-qL3XiaJ5gVyq1gVD0GydYSHi_SnoE_XDo" alt="Imagem do Chalé">
          </div>
          <div class="slide first">
            <img src="https://i.picsum.photos/id/904/800/500.jpg?hmac=UsFMYKu8PL-Yk1NeGs_NZHHZ3Q0ByEgtlh1Yf7NkJpE" alt="Imagem do Chalé">
          </div>
          <div class="slide first">
            <img src="https://i.picsum.photos/id/1058/800/500.jpg?hmac=bUPRpfGU_XV3oiMQYMsgldpsA7dFcibw-73lZGxew50" alt="Imagem do Chalé">
          </div>
          <div class="slide first">
            <img src="https://i.picsum.photos/id/575/800/500.jpg?hmac=PXi7kmt03wjtsx1P6z0UrgW2G-A_pWeGVkeyWCsGytU" alt="Imagem do Chalé">
          </div>
          <div class="slide first">
            <img src="https://i.picsum.photos/id/185/800/500.jpg?hmac=vDnfv1YP687hpdh5tkmPRFGZr39KJ4tmDoBAFxfcv5g" alt="Imagem do Chalé">
          </div>
          <div class="slide first">
            <img src="https://i.picsum.photos/id/568/800/500.jpg?hmac=qfxU9rccPLybsDI_nX3evof4xp3xoejdio13fmXLPkc" alt="Imagem do Chalé">
          </div>
          <div class="slide first">
            <img src="https://i.picsum.photos/id/825/800/500.jpg?hmac=qfqZS9cky-mslO4miTMNhQ8Xe6O2INVQXly-3mRXsJc" alt="Imagem do Chalé">
          </div>
      </div>
      

      <div class="navigation-auto">
        <div class="auto-btn1"></div>
        <div class="auto-btn2"></div>
        <div class="auto-btn3"></div>
        <div class="auto-btn4"></div>
        <div class="auto-btn5"></div>
        <div class="auto-btn6"></div>
        <div class="auto-btn7"></div>
        <div class="auto-btn8"></div>
      </div>

    </div>
    <div class="navigation-manual">
      <label for="radio1" class="manual-btn"></label>
      <label for="radio2" class="manual-btn"></label>
      <label for="radio3" class="manual-btn"></label>
      <label for="radio4" class="manual-btn"></label>
      <label for="radio5" class="manual-btn"></label>
      <label for="radio6" class="manual-btn"></label>
      <label for="radio7" class="manual-btn"></label>
      <label for="radio8" class="manual-btn"></label>

    </div>
  </div>
</body>