为什么单击按钮时轮播的幻灯片没有变化？

Question

我在互联网上找到了一个由 HTML 和 CSS 制成的轮播，并将其复制粘贴到我的网站代码中。我找到的代码在轮播代码之前编写了按钮代码，这就是为什么按钮显示在轮播顶部的原因。我更正了布局，但由于某种原因按钮停止工作。

.products {
  grid-template-rows: 500px 100px;
  grid-template-columns: 30px 30px 30px 30px 30px 30px 30px 30px;
}

.rbn {
  margin: 0px 5px 0px 5px;
}

.images {
  width: auto;
  height: 500px;
  max-height: 400px;
  margin: auto;
  display: block;
}

main#carousel {
  grid-row: 1 / 2;
  grid-column: 1 / 8;
  width: 100vw;
  height: 500px;
  padding-right: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 600px;
  --items: 8;
  --middle: 3;
  --position: 1;
  pointer-events: none;
}

div.item {
  position: absolute;
  width: 300px;
  height: 400px;
  background-color: coral;
  --r: calc(var(--position) - var(--offset));
  --abs: max(calc(var(--r) * -1), var(--r));
  transition: all 0.25s linear;
  transform: rotateY(calc(-10deg * var(--r))) translateX(calc(-300px * var(--r)));
  z-index: calc((var(--position) - var(--abs)));
}

div.item:nth-of-type(1) {
  --offset: 1;
  background-color: #90f1ef;
}

div.item:nth-of-type(2) {
  --offset: 2;
  background-color: #ff70a6;
}

div.item:nth-of-type(3) {
  --offset: 3;
  background-color: #ff9770;
}

div.item:nth-of-type(4) {
  --offset: 4;
  background-color: #ffd670;
}

div.item:nth-of-type(5) {
  --offset: 5;
  background-color: #e9ff70;
}

div.item:nth-of-type(6) {
  --offset: 6;
  background-color: #f76e11;
}

div.item:nth-of-type(7) {
  --offset: 7;
  background-color: #2eb086;
}

div.item:nth-of-type(8) {
  --offset: 8;
  background-color: #faeee7;
}

input:nth-of-type(1) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

input:nth-of-type(1):checked~main#carousel {
  --position: 1;
}

input:nth-of-type(2) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

input:nth-of-type(2):checked~main#carousel {
  --position: 2;
}

input:nth-of-type(3) {
  grid-column: 4 /5;
  grid-row: 2 / 3;
}

input:nth-of-type(3):checked~main#carousel {
  --position: 3;
}

input:nth-of-type(4) {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

input:nth-of-type(4):checked~main#carousel {
  --position: 4;
}

input:nth-of-type(5) {
  grid-column: 6 / 7;
  grid-row: 2 / 3;
}

input:nth-of-type(5):checked~main#carousel {
  --position: 5;
}

input:nth-of-type(6) {
  grid-column: 7 / 8;
  grid-row: 2 / 3;
}

input:nth-of-type(6):checked~main#carousel {
  --position: 6;
}

input:nth-of-type(7) {
  grid-column: 8 / 9;
  grid-row: 2 / 3;
}

input:nth-of-type(7):checked~main#carousel {
  --position: 7;
}

input:nth-of-type(8) {
  grid-column: 9 / 10;
  grid-row: 2 / 3;
}

input:nth-of-type(8):checked~main#carousel {
  --position: 8;
}

<div "products">
  <main id="carousel">
    <div class="item">
      <img class="images" src="almondflakes.png" alt="af" />
    </div>
    <div class="item">
      <img class="images" src="butterscotchballs.png" alt="bb" />
    </div>
    <div class="item">
      <img class="images" src="chocoballs.png" alt="cb" />
    </div>
    <div class="item">
      <img class="images" src="chocolatesprinklers.png" alt="cs" />
    </div>
    <div class="item">
      <img class="images" src="oreodust.png" alt="od" />
    </div>
    <div class="item">
      <img class="images" src="rainbowsprinkles.png" alt="rs" />
    </div>
    <div class="item">
      <img class="images" src="ricekrispies.png" alt="rk" />
    </div>
    <div class="item">
      <img class="images" src="whitecreamballs.png" alt="wc" />
    </div>
  </main>
  <input class="rbn" type="radio" name="position" checked />
  <input class="rbn" type="radio" name="position" />
  <input class="rbn" type="radio" name="position" />
  <input class="rbn" type="radio" name="position" />
  <input class="rbn" type="radio" name="position" />
  <input class="rbn" type="radio" name="position" />
  <input class="rbn" type="radio" name="position" />
  <input class="rbn" type="radio" name="position" />
</div>

Answer 1

CSS 中的波浪号 (~) 是 subsequent sibling combination selector。当您反转 HTML 的结构时，您破坏了这些结构。它们不能反向工作。

您需要使用不涉及更改标记的另一种方法来重新定位按钮。 Reversing column order 可能会。

.products {
  grid-template-rows: 500px 100px;
  grid-template-columns: 30px 30px 30px 30px 30px 30px 30px 30px;
}

.rbn {
  margin: 0px 5px 0px 5px;
}

.images {
  width: auto;
  height: 500px;
  max-height: 400px;
  margin: auto;
  display: block;
}

main#carousel {
  grid-row: 1 / 2;
  grid-column: 1 / 8;
  width: 100vw;
  height: 500px;
  padding-right: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 600px;
  --items: 8;
  --middle: 3;
  --position: 1;
  pointer-events: none;
}

div.item {
  position: absolute;
  width: 300px;
  height: 400px;
  background-color: coral;
  --r: calc(var(--position) - var(--offset));
  --abs: max(calc(var(--r) * -1), var(--r));
  transition: all 0.25s linear;
  transform: rotateY(calc(-10deg * var(--r))) translateX(calc(-300px * var(--r)));
  z-index: calc((var(--position) - var(--abs)));
}

div.item:nth-of-type(1) {
  --offset: 1;
  background-color: #90f1ef;
}

div.item:nth-of-type(2) {
  --offset: 2;
  background-color: #ff70a6;
}

div.item:nth-of-type(3) {
  --offset: 3;
  background-color: #ff9770;
}

div.item:nth-of-type(4) {
  --offset: 4;
  background-color: #ffd670;
}

div.item:nth-of-type(5) {
  --offset: 5;
  background-color: #e9ff70;
}

div.item:nth-of-type(6) {
  --offset: 6;
  background-color: #f76e11;
}

div.item:nth-of-type(7) {
  --offset: 7;
  background-color: #2eb086;
}

div.item:nth-of-type(8) {
  --offset: 8;
  background-color: #faeee7;
}

input:nth-of-type(1) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

input:nth-of-type(1):checked~main#carousel {
  --position: 1;
}

input:nth-of-type(2) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

input:nth-of-type(2):checked~main#carousel {
  --position: 2;
}

input:nth-of-type(3) {
  grid-column: 4 /5;
  grid-row: 2 / 3;
}

input:nth-of-type(3):checked~main#carousel {
  --position: 3;
}

input:nth-of-type(4) {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

input:nth-of-type(4):checked~main#carousel {
  --position: 4;
}

input:nth-of-type(5) {
  grid-column: 6 / 7;
  grid-row: 2 / 3;
}

input:nth-of-type(5):checked~main#carousel {
  --position: 5;
}

input:nth-of-type(6) {
  grid-column: 7 / 8;
  grid-row: 2 / 3;
}

input:nth-of-type(6):checked~main#carousel {
  --position: 6;
}

input:nth-of-type(7) {
  grid-column: 8 / 9;
  grid-row: 2 / 3;
}

input:nth-of-type(7):checked~main#carousel {
  --position: 7;
}

input:nth-of-type(8) {
  grid-column: 9 / 10;
  grid-row: 2 / 3;
}

input:nth-of-type(8):checked~main#carousel {
  --position: 8;
}

<div "products">
  <input class="rbn" type="radio" name="position" checked />
  <input class="rbn" type="radio" name="position" />
  <input class="rbn" type="radio" name="position" />
  <input class="rbn" type="radio" name="position" />
  <input class="rbn" type="radio" name="position" />
  <input class="rbn" type="radio" name="position" />
  <input class="rbn" type="radio" name="position" />
  <input class="rbn" type="radio" name="position" />

  <main id="carousel">
    <div class="item">
      <img class="images" src="almondflakes.png" alt="af" />
    </div>
    <div class="item">
      <img class="images" src="butterscotchballs.png" alt="bb" />
    </div>
    <div class="item">
      <img class="images" src="chocoballs.png" alt="cb" />
    </div>
    <div class="item">
      <img class="images" src="chocolatesprinklers.png" alt="cs" />
    </div>
    <div class="item">
      <img class="images" src="oreodust.png" alt="od" />
    </div>
    <div class="item">
      <img class="images" src="rainbowsprinkles.png" alt="rs" />
    </div>
    <div class="item">
      <img class="images" src="ricekrispies.png" alt="rk" />
    </div>
    <div class="item">
      <img class="images" src="whitecreamballs.png" alt="wc" />
    </div>
  </main>
</div>