24.Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토
405
작성자 없음
0 câu hỏi đã được viết
2
slide content 3개 까지만 있는데,
3개 이상이면 어떻게 해야되나요??
HTML/CSS
jquery
Câu trả lời 2
1
만약 4개라면 input[type=radio] 개수와 label의 개수를 맞춰 주세요.
그리고 width: 33.3333% 를 width: 25%로 해주시면 됩니다.
그리고 2번째 질문은 html, css 모든 코드를 복사해서 올려주세요.
수업 내용은 아니지만 체크해볼게요~
0
<!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
.items {
height: 100vh;
width: 300%; // 이부분을 600%으로 하니까 되네요:)
transition: 0.5s;
position: absolute;
top: 0;
left: 0;
}1
.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
73
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
68
2
input checked 질문합니다.
0
76
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
140
2
Part 1 영상 안나옵니다
1
88
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
485
2
화면 정중앙에 오게끔 할수있나요?
1
169
1
어코디언 네비게이션 중
1
124
1
라이브서버 문제
1
225
2
넷플릭스 어코디언 예제 질문
1
102
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
154
1
active 관련 질문
1
145
2