728x90
HTML
: Body부분 => ... => 사이드바 => 사이드바 엘레먼트에서 진행
: //로 된 주석문 제거하고사용하기
<body id="tt-body-page" data-sidebar-default="">
...
<s_t3>
<div id="__tidory">
<aside id="__sidebar">
<div class="__">
<div class="___">
<s_sidebar>
...
// 배너 추가하는 부분 시작
<s_sidebar_element>
<!-- 배너 플러그인-->
<div class="section">
// 원하는 이미지 만큼 추가. 첫 이미지는 checked 추가
<input type="radio" name="slide" id="slide01" checked>
<input type="radio" name="slide" id="slide02">
...
<input type="radio" name="slide" id="slide11">
// 이미지 슬라이더 추가
<div class="slidewrap">
<ul class="slidelist">
// 1번 이미지 태그
<li>
<a href="https://hyospital.tistory.com/">
<label for="slide11" class="left"></label>
<img src="https://velog.velcdn.com/images/hyoreal51/profile/7df8c08f-b6e5-4d02-9ff8-65cb2d066ec5/image.png">
<label for="slide02" class="right"></label>
</a>
</li>
// 2번 이미지 태그
<li>
<a href="https://hyospital.tistory.com/">
<label for="slide01" class="left"></label>
<img src="https://cdn.discordapp.com/attachments/1051886080187703377/1054891055629217862/image0.png">
<label for="slide03" class="right"></label>
</a>
</li>
...
// 마지막 이미지 태그
<li>
<a href="https://hyospital.tistory.com/">
<label for="slide10" class="left"></label>
<img src="https://media.discordapp.net/attachments/1051886080187703377/1056601123085111387/image0.gif?width=676&height=676">
<label for="slide01" class="right"></label>
</a>
</li>
</ul>
</div>
</div>
</s_sidebar_element>
CSS
: //로 된 주석문 제거 후 사용하기
/* 슬라이드 배너 */
.section input[id*="slide"] {
display: none;
}
// 이미지 설정 부분
.section .slidewrap {
border-radius: 15px;
max-width: 200px;
margin-left: 5px;
/* margin: 0 auto; */
overflow: hidden;
}
// 이미지 slidelist 설정 부분
.section .slidelist {
white-space: nowrap;
font-size: 0;
}
.section .slidelist > li {
display: inline-block;
vertical-align: middle;
width: 100%;
transition: all .5s;
}
.section .slidelist > li > a {
display: block;
position: relative;
}
.section .slidelist li > a img {
width: 100%;
}
.section .slidelist label {
position: absolute;
z-index: 10;
top: 50%;
transform: translateY(-50%);
padding: 50px;
cursor: pointer;
}
// 이미지 전환 화살표 설정
.section .slidelist .left {
left: -30px;
background: url("https://tistory1.daumcdn.net/tistory/5234919/skin/images/left2.png") center center / 50% no-repeat / darkgrey;
}
.section .slidelist .right {
right: -30px;
background: url("https://tistory1.daumcdn.net/tistory/5234919/skin/images/right2.png") center center / 50% no-repeat / darkgrey;
}
// 이미지 이동 조절 : -100%당 왼쪽으로 이미지 한장씩 밀어내는 구조
.section [id="slide01"]:checked ~ .slidewrap .slidelist > li {transform: translateX(0%);}
.section [id="slide02"]:checked ~ .slidewrap .slidelist > li {transform: translateX(-100%);}
...
.section [id="slide11"]:checked ~ .slidewrap .slidelist > li {transform: translateX(-1000%);}
// 이미지 이동시 block 처리
.section .slide-control [class*="control"] {display: none;}
.section [id="slide01"]:checked ~ .slidewrap .control01 {display: block;}
.section [id="slide02"]:checked ~ .slidewrap .control02 {display: block;}
...
.section [id="slide11"]:checked ~ .slidewrap .control11 {display: block;}728x90
'etc' 카테고리의 다른 글
| [제품 리뷰] Vivobook Pro 15 2022 (K6500ZC) - 2023 2분기 최고의 가성비 노트북 구매 가이드 (0) | 2023.06.18 |
|---|---|
| [MySQL] MySQL root 비밀번호 변경 및 분실시 리셋방법 (0) | 2022.10.05 |
| [Parsec] 사용 단축키 모음 (1) | 2022.09.23 |
| [Parsec오류] your network seems to be slow 에러 (0) | 2022.09.10 |
| [화면오류] 듀얼모니터 사용시, 화면 일부 깨짐(잘림/검은화면/인식오류) (0) | 2022.09.08 |