-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
24.Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토
22.09.13 07:08 작성 조회수 212
2
slide content 3개 까지만 있는데,
3개 이상이면 어떻게 해야되나요??
답변을 작성해보세요.
1
코딩웍스(Coding Works)
지식공유자2022.09.13
만약 4개라면 input[type=radio] 개수와 label의 개수를 맞춰 주세요.
그리고 width: 33.3333% 를 width: 25%로 해주시면 됩니다.
그리고 2번째 질문은 html, css 모든 코드를 복사해서 올려주세요.
수업 내용은 아니지만 체크해볼게요~
인프런
2022.09.13
<!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;
}
인프런
2022.09.13
.items {
height: 100vh;
width: 300%; // 이부분을 600%으로 하니까 되네요:)
transition: 0.5s;
position: absolute;
top: 0;
left: 0;
}1
인프런
2022.09.13
.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의 문구가 들어가 있습니다.
답변 2