Cộng đồng Hỏi & Đáp của Inflearn

Không có người viết

Bài viết có thông tin người viết đã bị xóa.

HTML+CSS+JS Portfolio thực tế (Mùa 1)

24. Nguyên mẫu Thanh trượt Nội dung Pure CSS 01 (Nguyên mẫu Thanh trượt Nội dung theo Tab Toàn màn hình)

24.Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토

Viết

392

slide content 3개 까지만 있는데,

3개 이상이면 어떻게 해야되나요??

HTML/CSSjquery

Câu trả lời 2

codingworks

Người chia sẻ kiến thức

만약 4개라면 input[type=radio] 개수와 label의 개수를 맞춰 주세요.
그리고 width: 33.3333% 를 width: 25%로 해주시면 됩니다.

그리고 2번째 질문은 html, css 모든 코드를 복사해서 올려주세요.
수업 내용은 아니지만 체크해볼게요~

snrtn943653

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Content Slider</title>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body class="preload">
    <div class="tab-inner">
      <input type="radio" id="tab1" name="tabmenu" checked />
      <input type="radio" id="tab2" name="tabmenu" />
      <input type="radio" id="tab3" name="tabmenu" />
      <input type="radio" id="tab4" name="tabmenu" />
      <input type="radio" id="tab5" name="tabmenu" />
      <input type="radio" id="tab6" name="tabmenu" />

      <div class="tabs">
        <div class="items">
          <div>
            <h1>Portfolio Slide #01</h1>
          </div>
          <div>
            <h1>Portfolio Slide #02</h1>
          </div>
          <div>
            <h1>Portfolio Slide #03</h1>
          </div>
          <div>
            <h1>Portfolio Slide #04</h1>
          </div>
          <div>
            <h1>Portfolio Slide #05</h1>
          </div>
          <div>
            <h1>Portfolio Slide #06</h1>
          </div>
        </div>
      </div>
      <div class="btn">
        <label for="tab1">Graphic</label>
        <label for="tab2">Web Publishing</label>
        <label for="tab3">Logo & CI</label>
        <label for="tab4">Graphic</label>
        <label for="tab5">Web Publishing</label>
        <label for="tab6">Logo & CI</label>
      </div>
    </div>

    <script>
      $('body').removeClass('preload');
    </script>
  </body>
</html>

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

.preload * {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}

body {
  font-family: 'Raleway', sans-serif;
  line-height: 1.5em;
  margin: 0;
  font-weight: 300;
  color: #222;
}
a {
  text-decoration: none;
  color: #222;
}

.tab-inner {
}
input[name='tabmenu'] {
  display: none;
}
.tabs {
  overflow: hidden;
  position: relative;
  height: 100vh;
}
.items {
  height: 100vh;
  width: 300%;
  transition: 0.5s;
  position: absolute;
  top: 0;
  left: 0;
}
.items div {
  height: 100vh;
  float: left;
  width: 33.33333%;
  box-sizing: border-box;
  position: relative;
}
.items div:nth-child(1) {
  background: url(images/photo-01.jpg) no-repeat center center fixed;
  background-size: cover;
}
.items div:nth-child(2) {
  background: url(images/photo-02.jpg) no-repeat center center fixed;
  background-size: cover;
}
.items div:nth-child(3) {
  background: url(images/photo-03.jpg) no-repeat center center fixed;
  background-size: cover;
}
.items div:nth-child(1):before,
.items div:nth-child(2):before,
.items div:nth-child(3):before,
.items div:nth-child(4):before,
.items div:nth-child(5):before,
.items div:nth-child(6):before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
.items div:nth-child(1):before {
  background: linear-gradient(135deg, gold, transparent);
}
.items div:nth-child(2):before {
  background: linear-gradient(135deg, crimson, transparent);
}
.items div:nth-child(3):before {
  background: linear-gradient(135deg, royalblue, transparent);
}
.items div:nth-child(4):before {
  background: linear-gradient(135deg, gold, transparent);
}
.items div:nth-child(5):before {
  background: linear-gradient(135deg, crimson, transparent);
}
.items div:nth-child(6):before {
  background: linear-gradient(135deg, royalblue, transparent);
}

.items div h1 {
  font-size: 120px;
  font-weight: normal;
  color: #fff;
  position: relative;
  text-align: center;
  transform: translateY(-200px);
  /* opacity: 0; */
  /* transition: 0.5s; */
  /* transition-delay: 0.5s; */
}

.btn {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
}
.btn label {
  display: inline-block;
  cursor: pointer;
  color: #fff;
  margin: 0 15px;
}

input[id='tab1']:checked ~ .tabs .items {
  left: 0;
}
input[id='tab2']:checked ~ .tabs .items {
  left: -100%;
}
input[id='tab3']:checked ~ .tabs .items {
  left: -200%;
}
input[id='tab4']:checked ~ .tabs .items {
  left: -300%;
}
input[id='tab5']:checked ~ .tabs .items {
  left: -400%;
}
input[id='tab6']:checked ~ .tabs .items {
  left: -500%;
}

input[id='tab1']:checked ~ .btn label[for='tab1'],
input[id='tab2']:checked ~ .btn label[for='tab2'],
input[id='tab3']:checked ~ .btn label[for='tab3'] {
  color: crimson;
}

input[id='tab1']:checked ~ .tabs .items div:nth-child(1) h1,
input[id='tab2']:checked ~ .tabs .items div:nth-child(2) h1,
input[id='tab3']:checked ~ .tabs .items div:nth-child(3) h1 {
  transform: translateY(200px);
  opacity: 1;
}

snrtn943653

감사합니다 :)

snrtn943653

.items {
  height: 100vh;
  width: 300%; // 이부분을 600%으로 하니까 되네요:)
  transition: 0.5s;
  position: absolute;
  top: 0;
  left: 0;
}

snrtn943653

.items div:nth-child(1):before,
.items div:nth-child(2):before,
.items div:nth-child(3):before,
.items div:nth-child(4):before,
.items div:nth-child(5):before,
.items div:nth-child(6):before {
  content: '';
  position: absolute;
  width: 100% !important;
  height: 100% !important;
}

이렇게 했는데 nth-child 4 부터는 보이지가 않고,

nth-child 1 에 slide content 4의 문구가 들어가 있습니다.

Không có người viết

Bài viết có thông tin người viết đã bị xóa.

Đặt câu hỏi