Как отключить щелчок, чтобы перейти на чистый слайдер CSS - PullRequest
Новая
       42

Как отключить щелчок, чтобы перейти на чистый слайдер CSS

0 голосов
/ 04 июня 2019

Я имитировал чистый ползунок CSS с эффектом 3d, где щелчок не продвигает ползунок. Когда я изменяю это, щелчок продвигает ползунок. Любая помощь в том, чтобы щелчок не продвигал ползунок?

Оригинальный Codepen 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>

Мой Codepen https://codepen.io/michael-lythcott/pen/RmOWbe

Mine: 

* {
      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-эффект выглядел как колода карт.

Мне бы хотелось, чтобы моя ручка оставалась прежней, за исключением того, что нажатие в любом месте слайда НЕ продвигает ползунок.

1 Ответ

0 голосов
/ 04 июня 2019

Я думаю, что порядок, в котором флажки отображаются на слайды, неверен. В результате показанный слайд (верхняя часть стека) необязательно соответствует соответствующему флажку. Поэтому при нажатии на верхний слайд устанавливается флажок для другого слайда.

Я переупорядочил их так, чтобы <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>
...