슬라이더 연습하기

별초롱언니 2025. 3. 26. 17:57

슬라이더

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../CSS/ch1006/slide.css">
  <title>Document</title>
</head>

<body>

  <input type="radio" name="slider" id="slide01">
  <input type="radio" name="slider" id="slide02">
  <input type="radio" name="slider" id="slide03">

  <div class="slidebox">
    <div class="slides">

      <div class="slide">
        <label for="slide03" class="left">left</label>
        1
        <label for="slide02" class="right">right</label>
      </div>

      <div class="slide">
        <label for="slide01" class="left">left</label>
        2
        <label for="slide03" class="right">right</label>
      </div>

      <div class="slide">
        <label for="slide02" class="left">left</label>
        3
        <label for="slide01" class="right">right</label>
      </div>

    </div>
  </div>

</body>

</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.slidebox {
  width: 100px;
  height: 100px;
  margin: 30px auto;
  background-color: pink;
  white-space: nowrap;
}

.slides {
  font-size: 0;
}

.slide {
  font-size: 16px;
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 3px solid red;
  position: relative;
}

label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.left {
  left: 0;
}

.right {
  right: 0;
}

#slide01:checked ~ .slidebox .slide {
  transform: translateX(0%);
}

#slide02:checked ~ .slidebox .slide {
  transform: translateX(-100%);
}

#slide03:checked ~ .slidebox .slide {
  transform: translateX(-200%);
}

input {
  display: none;
}

See the Pen Untitled by byeolchorong (@byeolchorong) on CodePen.