如何禁用单击以在纯 css 滑块上前进

Question

我模仿了具有 3d 效果的纯 css 滑块，其中单击不会使滑块前进。当我改变它时，点击确实使滑块前进。有什么帮助可以使点击不会使滑块前进吗？

原始代码笔 https://codepen.io/panfilov/pen/GogJVy

例如，他们的 css

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 20px;
  background: #eee;
  user-select: none;
}

[type=radio] {
  display: none;
}

#slider {
  height: 35vw;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

#slider label {
  margin: auto;
  width: 60%;
  height: 100%;
  border-radius: 4px;
  position: absolute;
  left: 0; right: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
}

#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
  transform: translate3d(-30%,0,-200px);
}

#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(-15%,0,-100px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
  box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
  transform: translate3d(0,0,0);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(15%,0,-100px);
}

#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
  transform: translate3d(30%,0,-200px);
}

#slide1 { background: #00BCD4 }
#slide2 { background: #4CAF50 }
#slide3 { background: #CDDC39 }
#slide4 { background: #FFC107 }
#slide5 { background: #FF5722 }

<section id="slider">
  <input type="radio" name="slider" id="s1">
  <input type="radio" name="slider" id="s2">
  <input type="radio" name="slider" id="s3" checked>
  <input type="radio" name="slider" id="s4">
  <input type="radio" name="slider" id="s5">
  <label for="s1" id="slide1"></label>
  <label for="s2" id="slide2"></label>
  <label for="s3" id="slide3"></label>
  <label for="s4" id="slide4"></label>
  <label for="s5" id="slide5"></label>
</section>

我的代码笔 https://codepen.io/michael-lythcott/pen/RmOWbe

我的：

* {
      margin: 0;
      padding: 0;
    }

    body {
      padding: 20px;
      background: #eee;
      user-select: none;
    }

    [type=radio] {
      /* display: none; */
    }

    #slider {
      height: 35vw;
      position: relative;
      perspective: 1000px;
      transform-style: preserve-3d;
    }

    #slider label {
      margin: auto;
      width: 60%;
      height: 400px;
      border-radius: 4px;
      position: absolute;
      left: 0; right: 0;
      cursor: pointer;
      transition: transform 0.4s ease;
      font-size: 20px;
      padding: 2em;
      overflow: scroll;
    }

    #s1:checked ~ #slide4, #s2:checked ~ #slide5,
    #s3:checked ~ #slide1, #s4:checked ~ #slide2,
    #s5:checked ~ #slide3 {
      box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
      transform: translate3d(0,0,10px);
    }

    #s1:checked ~ #slide5, #s2:checked ~ #slide1,
    #s3:checked ~ #slide2, #s4:checked ~ #slide3,
    #s5:checked ~ #slide4 {
      box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
      transform: translate3d(10px,10px,11px);
    }

    #s1:checked ~ #slide1, #s2:checked ~ #slide2,
    #s3:checked ~ #slide3, #s4:checked ~ #slide4,
    #s5:checked ~ #slide5 {
      box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
      transform: translate3d(20px,20px,12px);
    }

    #s1:checked ~ #slide2, #s2:checked ~ #slide3,
    #s3:checked ~ #slide4, #s4:checked ~ #slide5,
    #s5:checked ~ #slide1 {
      box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
      transform: translate3d(30px,30px,13px);
    }

    #s1:checked ~ #slide3, #s2:checked ~ #slide4,
    #s3:checked ~ #slide5, #s4:checked ~ #slide1,
    #s5:checked ~ #slide2 {
      box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
      transform: translate3d(40px,40px,14px);
    }

    #slide1 { background: #00BCD4 }
    #slide2 { background: #4CAF50 }
    #slide3 { background: #CDDC39 }
    #slide4 { background: #FFC107 }
    #slide5 { background: #FF5722 }

<!DOCTYPE html>
<html>
<body>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      padding: 20px;
      background: #eee;
      user-select: none;
    }

    [type=radio] {
      /* display: none; */
    }

    #slider {
      height: 35vw;
      position: relative;
      perspective: 1000px;
      transform-style: preserve-3d;
    }

    #slider label {
      margin: auto;
      width: 60%;
      height: 400px;
      border-radius: 4px;
      position: absolute;
      left: 0; right: 0;
      cursor: pointer;
      transition: transform 0.4s ease;
      font-size: 20px;
      padding: 2em;
      overflow: scroll;
    }

    #s1:checked ~ #slide4, #s2:checked ~ #slide5,
    #s3:checked ~ #slide1, #s4:checked ~ #slide2,
    #s5:checked ~ #slide3 {
      box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
      transform: translate3d(0,0,10px);
    }

    #s1:checked ~ #slide5, #s2:checked ~ #slide1,
    #s3:checked ~ #slide2, #s4:checked ~ #slide3,
    #s5:checked ~ #slide4 {
      box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
      transform: translate3d(10px,10px,11px);
    }

    #s1:checked ~ #slide1, #s2:checked ~ #slide2,
    #s3:checked ~ #slide3, #s4:checked ~ #slide4,
    #s5:checked ~ #slide5 {
      box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
      transform: translate3d(20px,20px,12px);
    }

    #s1:checked ~ #slide2, #s2:checked ~ #slide3,
    #s3:checked ~ #slide4, #s4:checked ~ #slide5,
    #s5:checked ~ #slide1 {
      box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
      transform: translate3d(30px,30px,13px);
    }

    #s1:checked ~ #slide3, #s2:checked ~ #slide4,
    #s3:checked ~ #slide5, #s4:checked ~ #slide1,
    #s5:checked ~ #slide2 {
      box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
      transform: translate3d(40px,40px,14px);
    }

    #slide1 { background: #00BCD4 }
    #slide2 { background: #4CAF50 }
    #slide3 { background: #CDDC39 }
    #slide4 { background: #FFC107 }
    #slide5 { background: #FF5722 }

  </style>

 <section id="slider">
    <input type="radio" name="slider" id="s1">
    <input type="radio" name="slider" id="s2">
    <input type="radio" name="slider" id="s3" checked>
    <input type="radio" name="slider" id="s4">
    <input type="radio" name="slider" id="s5">


    <label for="s1" id="slide1">
      <article class="post-31 work type-work status-publish has-post-thumbnail hentry">
                    <header class="mb-3 pb-2">
                      <h1 class="entry-title white m-0 h4 gooper fontWeight400">
                        Ladro Roasting                      </h1>
                                              <div class="d-block apercu small-text noMargin">
                          <p>Website Design | Branding</p>
                        </div>
                                          </header>
                    <div class="entry-content small-text apercu">
                      
                    </div>
                  </article>
    </label>


    <label for="s2" id="slide2">
      <article class="post-31 work type-work status-publish has-post-thumbnail hentry">
                    <header class="mb-3 pb-2">
                      <h1 class="entry-title white m-0 h4 gooper fontWeight400">
                        Ladro Roasting                      </h1>
                                              <div class="d-block apercu small-text noMargin">
                          <p>Website Design | Branding</p>
                        </div>
                                          </header>
                    <div class="entry-content small-text apercu">
                      
                    </div>
                  </article>
    </label>


    <label for="s3" id="slide3">
      <article class="post-31 work type-work status-publish has-post-thumbnail hentry">
                    <header class="mb-3 pb-2">
                      <h1 class="entry-title white m-0 h4 gooper fontWeight400">
                        Ladro Roasting                      </h1>
                                              <div class="d-block apercu small-text noMargin">
                          <p>Website Design | Branding</p>
                        </div>
                                          </header>
                    <div class="entry-content small-text apercu">
                      
                    </div>
                  </article>
    </label>


    <label for="s4" id="slide4">
      <article class="post-31 work type-work status-publish has-post-thumbnail hentry">
                    <header class="mb-3 pb-2">
                      <h1 class="entry-title white m-0 h4 gooper fontWeight400">
                        Ladro Roasting                      </h1>
                                              <div class="d-block apercu small-text noMargin">
                          <p>Website Design | Branding</p>
                        </div>
                                          </header>
                    <div class="entry-content small-text apercu">
                      
                    </div>
                  </article>
    </label>


    <label for="s5" id="slide5">
      <article class="post-31 work type-work status-publish has-post-thumbnail hentry">
                    <header class="mb-3 pb-2">
                      <h1 class="entry-title white m-0 h4 gooper fontWeight400">
                        Ladro Roasting                      </h1>
                                              <div class="d-block apercu small-text noMargin">
                          <p>Website Design | Branding</p>
                        </div>
                                          </header>
                    <div class="entry-content small-text apercu">
                      
                    </div>
                  </article>
    </label>
  </section>

</body>
</html>

我只改变了 3d 效果的大小和设置，使 3d 效果看起来像一叠卡片。

我希望我的笔保持原样，只是单击幻灯片上的任意位置不会使滑块前进。

Answer 1

我认为复选框映射到幻灯片的顺序不正确。因此，显示的幻灯片（堆栈顶部）不一定对应于相应的复选框。因此，当您单击顶部幻灯片时，会选中另一张幻灯片的复选框。

我对它们重新排序，使堆栈顶部的 <label> 对应于同一张幻灯片的复选框。现在，当您单击顶部的幻灯片时，该复选框已被选中。

* {
  margin: 0;
  padding: 0;
}

body {
  /*padding: 20px;*/
  background: #eee;
  user-select: none;
}

[type=radio] {
  /* display: none; */
}

#slider {
  height: 35vw;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

#slider label {
  margin: auto;
  width: 60%;
  /*height: 400px;*/
  border-radius: 4px;
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
  font-size: 20px;
  /*padding: 2em;*/
  padding: 1em 2em;
  /*overflow: scroll;*/
}

#s1:checked~#slide5,
#s2:checked~#slide1,
#s3:checked~#slide2,
#s4:checked~#slide3,
#s5:checked~#slide4 {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
  transform: translate3d(0, 30px, 10px);
}

#s1:checked~#slide4,
#s2:checked~#slide5,
#s3:checked~#slide1,
#s4:checked~#slide2,
#s5:checked~#slide3 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
  transform: translate3d(10px, 40px, 11px);
}

#s1:checked~#slide3,
#s2:checked~#slide4,
#s3:checked~#slide5,
#s4:checked~#slide1,
#s5:checked~#slide2 {
  box-shadow: 0 13px 25px 0 rgba(0, 0, 0, .3), 0 11px 7px 0 rgba(0, 0, 0, .19);
  transform: translate3d(20px, 50px, 12px);
}

#s1:checked~#slide2,
#s2:checked~#slide3,
#s3:checked~#slide4,
#s4:checked~#slide5,
#s5:checked~#slide1 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
  transform: translate3d(30px, 60px, 13px);
}

#s1:checked~#slide1,
#s2:checked~#slide2,
#s3:checked~#slide3,
#s4:checked~#slide4,
#s5:checked~#slide5 {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
  transform: translate3d(40px, 70px, 14px);
}

#slide1 {
  background: #00BCD4
}

#slide2 {
  background: #4CAF50
}

#slide3 {
  background: #CDDC39
}

#slide4 {
  background: #FFC107
}

#slide5 {
  background: #FF5722
}

<section id="slider">

  <input type="radio" name="slider" id="s1" checked>
  <input type="radio" name="slider" id="s2">
  <input type="radio" name="slider" id="s3">
  <input type="radio" name="slider" id="s4">
  <input type="radio" name="slider" id="s5">

  <label for="s1" id="slide1">
    <article class="post-31 work type-work status-publish has-post-thumbnail hentry">
      <header class="mb-3 pb-2">
        <h1 class="entry-title white m-0 h4 gooper fontWeight400">Ladro Roasting</h1>
        <div class="d-block apercu small-text noMargin">
          <p>Website Design | Branding</p>
        </div>
      </header>
      <div class="entry-content small-text apercu"></div>
    </article>
  </label>

  <label for="s2" id="slide2">
    <article class="post-31 work type-work status-publish has-post-thumbnail hentry">
      <header class="mb-3 pb-2">
        <h1 class="entry-title white m-0 h4 gooper fontWeight400">Ladro Roasting</h1>
        <div class="d-block apercu small-text noMargin">
          <p>Website Design | Branding</p>
        </div>
      </header>
      <div class="entry-content small-text apercu"></div>
    </article>
  </label>

  <label for="s3" id="slide3">
    <article class="post-31 work type-work status-publish has-post-thumbnail hentry">
      <header class="mb-3 pb-2">
        <h1 class="entry-title white m-0 h4 gooper fontWeight400">Ladro Roasting</h1>
        <div class="d-block apercu small-text noMargin">
          <p>Website Design | Branding</p>
        </div>
      </header>
      <div class="entry-content small-text apercu"></div>
    </article>
  </label>

  <label for="s4" id="slide4">
    <article class="post-31 work type-work status-publish has-post-thumbnail hentry">
      <header class="mb-3 pb-2">
        <h1 class="entry-title white m-0 h4 gooper fontWeight400">Ladro Roasting</h1>
        <div class="d-block apercu small-text noMargin">
          <p>Website Design | Branding</p>
        </div>
      </header>
      <div class="entry-content small-text apercu"></div>
    </article>
  </label>

  <label for="s5" id="slide5">
    <article class="post-31 work type-work status-publish has-post-thumbnail hentry">
      <header class="mb-3 pb-2">
        <h1 class="entry-title white m-0 h4 gooper fontWeight400">Ladro Roasting</h1>
        <div class="d-block apercu small-text noMargin">
          <p>Website Design | Branding</p>
        </div>
      </header>
      <div class="entry-content small-text apercu"></div>
    </article>
  </label>

</section>

如何禁用单击以在纯 css 滑块上前进

How to disable the click to advance on a pure css slider

css

3d

transform

slider

pure-css