티스토리 뷰
HTML
input type=radio <-> label 연결 버튼 체크를 통한 슬라이드 나타내기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="slidescript.css">
</head>
<body>
<div class="section">
<input type="radio" class="a" name="slide" id="slide01" checked>
<input type="radio" class="a" name="slide" id="slide02">
<input type="radio" class="a" name="slide" id="slide03">
<div class="slidewrap">
<ul class="slidelist">
<li class="first">
<a>
<label for="slide03" class="left to3_1"></label>
<img src="./slide01.jpg" >
<label for="slide02" class="right to2_1"></label>
</a>
</li>
<li class="second">
<a>
<label for="slide01" class="left to1_2"></label>
<img src="./slide02.jpg">
<label for="slide03" class="right to3_2"></label>
</a>
</li>
<li class="third">
<a>
<label for="slide02" class="left to2_3"></label>
<img src="./slide03.jpg">
<label for="slide01" class="right to1_3"></label>
</a>
</li>
</ul>
</div>
</div>input type="radio"한 것을 label의 for의 value와 동일하게 하고 서로 연결을 해줍니다.
*
{
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
text-decoration:none;
}
input[ type=radio]
{
display: none;
}
.section
{
width:100%;
/* height: 800px; */
/* border: 1px solid red; */
/* margin: 0 auto; */
}
.sliderwrap
{
width:100%;
}
.slidelist
{
width: 100%;
white-space:nowrap;
font-size:0;
/* overflow:hidden; */
/* border: 1px solid red; */
}
.slidelist li
{
/* font-size:0; */
width:100%;
display: inline-block;
position:relative;
/* border:1px solid red; */
}
.slidelist li a
{
display:block;
}
img
{
width: 100%;
}
.left
{
position: absolute;
background: url(./left.png) center center / 100% no-repeat;
border: 1px solid #eee;
top: 50%;
left: 5%;
transform:translate(-50%,-50%);
width:30px;
height:30px;
cursor:pointer;
}
.right
{
position: absolute;
background: url(./right.png) center center / 100% no-repeat;
border: 1px solid #eee;
top: 50%;
left: 95%;
transform:translate(-50%,-50%);
width:30px;
height:30px;
cursor:pointer;
}
.slidelist
{
transition : all 1s;
}
#slide01:checked ~ .slidewrap .slidelist li
{
transform:translate(0%);
transition: all 1.5s;
}
#slide02:checked ~ .slidewrap .slidelist li
{
transform:translate(-100%);
transition: all 1.5s;
}
#slide03:checked ~ .slidewrap .slidelist li
{
transform:translate(-200%);
transition: all 1.5s;
}css로 꾸며준 뒤에 slide 기능 구현을 위해 해당 슬라이드 체크할 시에 관련 슬라이드 화면이 보여지게 하기 위해 li자체에 이동관련 translate를 줬습니다
#slide01:checked ~ .slidewrap .slidelist li{ transform:translate(0%); transition: all 1.5s;}
#slide02:checked ~ .slidewrap .slidelist li{ transform:translate(-100%); transition: all 1.5s;}
#slide03:checked ~ .slidewrap .slidelist li{ transform:translate(-200%); transition: all 1.5s;}
<script>
var btn1_3 = document.querySelector(".to3_1");
console.log(btn1_3);
var btn1_2 = document.querySelector(".to2_1");
console.log(btn1_2);
var btn2_1 = document.querySelector(".to1_2");
console.log(btn2_1);
var btn2_3 = document.querySelector(".to3_2");
console.log(btn2_3);
var btn3_2 = document.querySelector(".to2_3");
console.log(btn3_2);
var btn3_1 = document.querySelector(".to1_3");
console.log(btn3_1);
// btn1_3.addEventListener("click",function(btn)
// {
// console.log(btn);
// });
// console.log(first);
btn1_3.addEventListener("click",move_2);
btn1_2.addEventListener("click",move_1);
btn2_1.addEventListener("click",move_0);
btn2_3.addEventListener("click",move_2);
btn3_2.addEventListener("click",move_1);
btn3_1.addEventListener("click",move_0);
var aa = document.querySelector('.slidelist');
// page1
function move_0()
{
console.log("0연결");
// var slide1 = document.querySelector(".first");
// var slide2 = document.querySelector(".second");
// var slide3 = document.querySelector(".third");
// console.log(slide1);
// console.log(slide2);
// console.log(slide3);
// slide1.style.transform='translateX(0%)';
// slide2.style.transform='translateX(0%)';
// slide3.style.transform='translateX(0%)';
aa.style.transform='translate(0%)';
}
// page2
function move_1()
{
console.log("1연결");
// var slide1 = document.querySelector(".first");
// var slide2 = document.querySelector(".second");
// var slide3 = document.querySelector(".third");
// console.log(slide1);
// console.log(slide2);
// console.log(slide3);
// slide1.style.transform='translateX(-100%)';
// slide2.style.transform='translateX(-100%)';
// slide3.style.transform='translateX(-100%)';
aa.style.transform='translate(-100%)';
}
// page3
function move_2()
{
console.log("2연결");
// var slide1 = document.querySelector(".first");
// var slide2 = document.querySelector(".second");
// var slide3 = document.querySelector(".third");
// console.log(slide1);
// console.log(slide2);
// console.log(slide3);
// slide1.style.transform='translateX(-200%)';
// slide2.style.transform='translateX(-200%)';
// slide3.style.transform='translateX(-200%)';
aa.style.transform='translate(-200%)';
}
</script>
var btn1_3 = document.querySelector(".to3_1"); console.log(btn1_3);
var btn1_2 = document.querySelector(".to2_1"); console.log(btn1_2);
var btn2_1 = document.querySelector(".to1_2"); console.log(btn2_1);
var btn2_3 = document.querySelector(".to3_2"); console.log(btn2_3);
var btn3_2 = document.querySelector(".to2_3"); console.log(btn3_2);
var btn3_1 = document.querySelector(".to1_3"); console.log(btn3_1);
js로 슬라이드를 구현할려고할 때 각자 버튼들의 클래스들을 만들어 준 뒤 변수를 통해 초기화를 해줬습니다.
btn1_3.addEventListener("click",move_2);
btn1_2.addEventListener("click",move_1);
btn2_1.addEventListener("click",move_0);
btn2_3.addEventListener("click",move_2);
btn3_2.addEventListener("click",move_1);
btn3_1.addEventListener("click",move_0);
해당 클래스를 클릭 할 때 함수가 실행되도록 addEventListener로 연결을 시켜줬습니다.
각각의 함수들은 li 자체에 클래스를 주고 변수에 할당을 한 뒤, 변수에 css translate 의 값을 지정해줘서 다같이 움직이도록 설정을 했습니다.
