CSS
.slider__wrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 800Px;
height: 450px;
box-shadow: 0 50px 100px rgba(0, 0, 0, 0.4);
}
.slider__img {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.slider__img img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.1);
transition: all 500ms ease-in-out;
}
.slider__img img.active {
opacity: 1;
transform: scale(1);
}
.slider__thumb {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 140px);
width: 100px;
display: flex;
justify-content: center;
gap: 10px;
}
.slider__thumb img {
cursor: pointer;
border: 2px solid transparent;
}
.slider__thumb img.active {
border: 2px solid #fff;
}
.slider__btn a {
position: absolute;
top: 0;
width: 40px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-style: 12px;
color: #fff;
background-color: rgba(0, 0, 0, 0.2);
transition: all 300ms ease-in-out;
}
.slider__btn a.next {
right: 0;
}
.slider__btn a:hover {
background-color: rgba(0, 0, 0, 0.5);
}이 코드는 이미지 슬라이더를 구현하는 CSS 코드입니다.
.slider__wrap 클래스는 슬라이더를 감싸는 컨테이너를 정의하며, 위치와 크기, 그림자 효과 등을 지정합니다.
.slider__img 클래스는 각 이미지를 감싸는 컨테이너를 정의하며, 이미지의 크기와 가리는 부분 처리를 지정합니다.
.slider__thumb 클래스는 이미지를 전환할 수 있는 썸네일 이미지를 감싸는 컨테이너를 정의하며, 위치와 크기, 그리고 활성화 된 썸네일 이미지의 스타일을 지정합니다.
.slider__btn 클래스는 좌우로 이동할 수 있는 화살표 버튼을 감싸는 컨테이너를 정의하며, 위치와 크기, 색상, 효과 등을 지정합니다.
이 코드는 HTML 코드와 함께 사용되어야하며, JavaScript를 사용하여 이미지 슬라이더를 제어해야합니다.
HTML
<main id="main">
<div class="slider__wrap">
<div class="slider__img"></div>
<div class="slider__thumb"></div>
<div class="slider__btn">
<a href="#" class="prev" title="이전이미지">prev</a>
<a href="#" class="next" title="다음이미지">next</a>
</div>
</div>
</main>이 코드는 HTML 코드입니다.
<main> 태그는 웹 페이지의 주요 콘텐츠를 감싸는 컨테이너를 정의합니다. 이 코드에서는 이미지 슬라이더를 감싸는 컨테이너를 감싸기 위해 사용됩니다.
<div> 태그는 웹 페이지에서 콘텐츠를 나타내는 데 사용되며, 이 코드에서는 이미지 슬라이더의 각 구성 요소를 나타내기 위해 사용됩니다.
.slider__wrap, .slider__img, .slider__thumb, .slider__btn은 CSS 코드에서 정의된 클래스 이름입니다. 이 코드는 HTML 요소에 각 클래스를 적용하여 이미지 슬라이더의 스타일과 레이아웃을 지정합니다.
<a> 태그는 웹 페이지에서 하이퍼링크를 나타내는 데 사용되며, 이 코드에서는 좌우 이동 버튼을 나타내기 위해 사용됩니다. href 속성은 클릭했을 때 이동할 페이지의 주소를 지정합니다. title 속성은 버튼의 툴팁(마우스를 올렸을 때 나타나는 설명)을 지정합니다. "prev"와 "next"는 각각 이전 이미지와 다음 이미지를 나타냅니다.
JAVASCRIPT
<script>
let images = [
"./img/sliderEffect03-min.jpg",
"./img/sliderEffect04-min.jpg",
"./img/sliderEffect05-min.jpg",
"./img/sliderEffect06-min.jpg",
"./img/sliderEffect07-min.jpg",
];
function imageSlider(parent, images){
let currentIndex = 0; // 현재 이미지
// 선택자(객체로 만들기)
let slider = {
parent: parent,
images: parent.querySelector(".slider__img"),
thumnails: parent.querySelector(".slider__thumb"),
prevBtn: parent.querySelector(".slider__btn .prev"),
nextBtn: parent.querySelector(".slider__btn .next")
}
// 이미지 출력하기
slider.images.innerHTML = images.map((image, index) => {
return `<img src="${image}" alt="이미지${index}">`;
}).join("");
// 이미지 활성화(active) 하기
let imageNodes = slider.images.querySelectorAll("img");
imageNodes[currentIndex].classList.add("active");
// 썸네일 이미지 출력하기
slider.thumnails.innerHTML = slider.images.innerHTML;
// 썸네일 첫 번째 이미지에게 액티브 활성화하기
slider.thumnails.firstChild.classList.add('active');
// 썸네일 활성화(active) 하기
let thumnailNodes = slider.thumnails.querySelectorAll("img");
thumnailNodes[currentIndex].classList.add("active");
// 썸네일 이미지 클릭하기
for(let i=0; i<thumnailNodes.length; i++){
// 화살표 대신 funtion을 쓰면 this를 쓸 수 있음.
thumnailNodes[i].addEventListener("click", function(){
slider.thumnails.querySelector("img.active").classList.remove("active");
thumnailNodes[i].classList.add("active");
imageNodes[currentIndex].classList.remove("active");
currentIndex = i; // 동시에 값을 읽을 경우,위에 값을 처음에 읽은 후, 해당 커렌트 인덱스를 읽음. 그래서 그 다음 값이 나올 수 있는 것.
imageNodes[currentIndex].classList.add("active");
});
}
thumnailNodes.forEach((node, i) => {
node.addEventListener("click", function() {
slider.thumnails.querySelector("img.active").classList.remove("active");
node.classList.add("active");
imageNodes[currentIndex].classList.remove("active");
currentIndex = i;
imageNodes[currentIndex].classList.add("active");
});
});
// 왼쪽 버튼 클릭하기
slider.prevBtn.addEventListener("click", function(){
imageNodes[currentIndex].classList.remove("active");
currentIndex--;
// 0 > 4 > 3 > 2 > 1 > 0 > 4 > 3... 순으로
if(currentIndex < 0) currentIndex = images.length -1;
imageNodes[currentIndex].classList.add("active");
// 썸네일 같이 옮기기
slider.thumnails.querySelector("img.active").classList.remove("active");
thumnailNodes[currentIndex].classList.add("active");
});
// 오른쪽 버튼 클릭하기
slider.nextBtn.addEventListener("click", function(){
imageNodes[currentIndex].classList.remove("active");
// 1 2 3 4 0 1 2 3 4 ... 순으로
currentIndex = (currentIndex + 1) % images.length;
imageNodes[currentIndex].classList.add("active");
// 썸네일 같이 옮기기
slider.thumnails.querySelector("img.active").classList.remove("active");
thumnailNodes[currentIndex].classList.add("active");
});
}
imageSlider(document.querySelector(".slider__wrap"), images);
</script>이 코드는 이미지 슬라이더를 만드는 자바스크립트 코드입니다. images 배열에 이미지 파일 경로를 저장하고, imageSlider() 함수는 parent와 images 매개변수를 받습니다. parent는 슬라이더를 담을 요소를 가리키는 선택자이며, images는 슬라이더에 표시할 이미지 파일 경로가 저장된 배열입니다.
imageSlider() 함수는 다음과 같은 작업을 수행합니다.
현재 이미지 인덱스(currentIndex)를 0으로 초기화합니다.
parent 요소의 자식 요소 중에서 슬라이드 이미지(slider__img)와 썸네일 이미지(slider__thumb) 요소를 선택합니다.
이전 버튼(prevBtn)과 다음 버튼(nextBtn) 요소를 선택합니다.
이미지를 출력하고, 첫 번째 이미지를 활성화합니다. 썸네일 이미지를 출력하고, 첫 번째 썸네일 이미지를 활성화합니다.
썸네일 이미지를 클릭하면 해당 이미지를 활성화하고, 이전/다음 버튼을 클릭하면 이전/다음 이미지를 활성화합니다. 이때, 썸네일 이미지와 슬라이드 이미지는 동기화됩니다.
댓글