inflearn logo
강의

講義
知識共有

HTML+CSS+JS ポートフォリオ実践公開(シーズン1)

24.Pure CSS コンテンツスライダープロトタイプ 01 (フルスクリーン タブ コンテンツスライダープロトタイプ)

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

406

작성자 없음

投稿した質問数 0

2

slide content 3개 까지만 있는데,

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

HTML/CSS jquery

回答 2

1

codingworks

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

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

0

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;
}

 

0

snrtn943653

감사합니다 :)

0

snrtn943653 

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

1

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의 문구가 들어가 있습니다.

class 값 한 번에 부여하는법

2

80

1

@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.

1

69

1

div#css-checker-widget의 해결방

1

60

2

input의 포커스되었을때 검정선이 사라지지 않아요

0

79

2

강의듣는법

1

74

1

아코디언 만들기 100%이하의 화면으로 보았을때

1

68

2

input checked 질문합니다.

0

76

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

140

2

Part 1 영상 안나옵니다

1

89

1

제이쿼리 작동이 안됩니다

1

199

3

강의 내용 질문있습니다.

1

120

2

일정 부분만 주석하는 방법

1

211

2

폰트어썸

1

134

2

인접선택자에 대한 질문드립니다!

1

129

2

delay 적용 안됨

1

134

1

rotateY(360deg)가 적용이 안됩니다!

1

186

2

세로이동할때 height값

1

138

2

폰트어썸이 안되요..

1

486

2

화면 정중앙에 오게끔 할수있나요?

1

169

1

어코디언 네비게이션 중

1

126

1

라이브서버 문제

1

228

2

넷플릭스 어코디언 예제 질문

1

104

1

이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?

1

157

1

active 관련 질문

1

146

2