이미지 슬라이더 만들기
슬라이더를 만드는 방법은 매우 많다.
라디오버튼, 비순서목록, 레이블을 활용하는 방법
기존템플릿 활용하는 방법
bxSlider, boostsrtap 등
CSS 파일
@charset "UTF-8";
/* 전체 페이지에 적용할 스타일- 여백제거 */
* {
margin: 0;
padding: 0;
}
/* 리스트 항목의 스타일 변경 */
.image_slider>ul {
list-style: none;
}
/* 슬라이더가 들어갈 공간(div)에 대한 설정*/
.image_slider {
position: relative;
overflow: hidden;
width: 600px;
height: 400px;
border: 1px solid;
}
/* 슬라이더 화면의 너비와 높이 설정
슬라이더 화면의 개수 * 100%로 계산하여 너비를 설정
4장이면 400%, 5장이면 500%*/
.image_slider>ul {
width: 400%;
height: 100%;
transition: margin-left 1s;
}
/* 각 항목(li)을 세로에서 가로로 변경 한 화면만 보이도록 너비를 설정
화면 4개 화면당 25%로 설정(홀수면 힘들다)*/
.image_slider>ul>li {
float: left;
width: 25%;
height: 100%;
}
/* 라이오 버튼 숨기기 라디오 버튼은 모양을 바꿀 수 없기 때문에 숨기고 label 사용
label로 모양을 처리하기*/
.image_slider input {
display: none;
}
/* 라디오 버튼 대신 만들기
label의 위치 조정 영역의 중앙 하단으로 바꾸기*/
.image_slider p {
text-align: center;
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
}
/* 각 슬라이더 화면 설정(컬러)*/
.image_slider li:nth-child(1) {
background-color: rgb(253, 255, 122);
background-image: url();
background-size: cover;
background-repeat: no-repeat;
}
.image_slider li:nth-child(2) {
background-color: rgb(138, 227, 243);
}
.image_slider li:nth-child(3) {
background-color: lightsalmon;
}
.image_slider li:nth-child(4) {
background-color: rgb(167, 144, 250);
}
/*label의 모양 설정*/
.image_slider label {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgb(151, 151, 151);
background-color: #bfd8fa;
cursor: pointer;
transition: 0.3s;
}
/* label 선택(클릭)시 화면 이동 처리 label 클릭 시 radio checked*/
#pos1:checked~ul {
margin-left: 0;
}
#pos2:checked~ul {
margin-left: -100%;
}
#pos3:checked~ul {
margin-left: -200%;
}
#pos4:checked~ul {
margin-left: -300%;
}
/*화면에 따른 label의 모양 변화*/
#pos1:checked~.pos>label:nth-child(1) {
background-color: blueviolet;
}
#pos2:checked~.pos>label:nth-child(2) {
background-color: blueviolet;
}
#pos3:checked~.pos>label:nth-child(3) {
background-color: blueviolet;
}
#pos4:checked~.pos>label:nth-child(4) {
background-color: blueviolet;
}html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Silder 실습</title>
<link type="text/css" rel="stylesheet" href="slider_style.css">
</head>
<!-- <style>
@import url(slider_style.css);
</style> -->
<body>
<div class="image_slider">
<input type="radio" name="pos" id="pos1" checked>
<input type="radio" name="pos" id="pos2">
<input type="radio" name="pos" id="pos3">
<input type="radio" name="pos" id="pos4">
<ul>
<li>첫번째 화면</li>
<li>두번째 화면</li>
<li>세번째 화면</li>
<li>네번째 화면</li>
</ul>
<p class="pos">
<label for="pos1"></label>
<label for="pos2"></label>
<label for="pos3"></label>
<label for="pos4"></label>
</p>
</div>
</body>
</html>'공부기록 > 실습' 카테고리의 다른 글
| 배경 이미지만 투명하게 처리하기 (0) | 2023.02.27 |
|---|---|
| 드롭 다운 메뉴 만들기 (0) | 2023.02.27 |
| 테이블 스타일링 (0) | 2023.02.27 |
| 이미지 슬라이더 만들기 적용 순서(상세 이미지) (0) | 2023.02.27 |
| Java 퀴즈 풀기 (0) | 2023.02.18 |
