HTML
<div class="slide">
<div class="wrapper slide-wrapper">
<ul class="slide-item slide-slides">
<li class="slide-slide slide-slide-container background-image" style="background-image: url('/images/slide/bridge-2805540.jpg');background-position: 50% 50%;">
<div class="item content background-content-black">
<div class="subhead" style="color:white;">[로고]</div>
<div class="subhead" style="color:white;">청와대 대한민국 ESG 협약한 기술로 인정받은 ESG 경영 문구</div>
<div class="subhead" style="color:white;">42번째 정부기관과 협약한 회사</div>
<div class="subhead" style="color:white;">(태양광 가로등 사진 전후면)</div>
</div>
<div class="slide-item-item-item item content background-content-black">
<div class="headline" style="color:white;">빛 그 이상의 가치를 전하는 스마트조명 기술 기업</div>
<div class="subhead" style="color:white;">해충방지LED 항균살균LED 악취제거LED 뷰티LED 동물성장LED 식물성장LED 이끼&탄소감축LED</div>
<a href="" class="link" style="color:white;font-size:17px;">자세히 알아보기 > </a>
</div>
</li>
<li class="slide-slide slide-slide-container background-image" style="background-image: url('/images/slide/KakaoTalk_Image_2023-06-12-10-53-11.jpeg');background-position: 50% 50%;">
<div class="item content background-content-black">
<div class="subhead" style="color:white;">모기 등 해충은 본능적으로 자외선 청색광(블루라이트)으로 모여듭니다.</div>
<div class="subhead" style="color:white;">MTC 해충방지 LED조명은 블루라이트 영역(300~500nm)을 100%제거하여 해충유입이 사라집니다</div>
<div class="subhead" style="color:white;">건물외부등 전원주택 공원 캠핑 카페 레스토랑 축사 양계장 등에 추천합니다</div>
<div class="headline" style="color:white;">해충방지 SolarLED조명</div>
<div class="subhead" style="color:white;">가로등, 투광등, 전구, 다운라이트</div>
<a href="" class="link" style="color:white;font-size:17px;">자세히 알아보기 > </a>
</div>
</li>
<li class="slide-slide slide-slide-container background-image" style="background-image: url('/images/slide/KakaoTalk_Image_2023-06-12-10-53-16.jpeg');background-position: 50% 50%;">
<div class="item content background-content-black">
<div class="headline" style="color:white;">New Nomal 시대에 박테리아로부터 고객과 가족을 보호합니다.</div>
<div class="subhead" style="color:white;">MTC 해충방지 LED조명은 높이2m-15w-24hr 항균살균테스트에서 박테리아균 99.9%를 제거합니다</div>
<div class="subhead" style="color:white;">욕실화장실 식탁 주방 반려동물하우스 요양병원 호텔 숙박시설 다중이용시설 등에 추천합니다</div>
<div class="subhead" style="color:white;">항균살균 LED조명</div>
<a href="" class="link" style="color:white;font-size:17px;">자세히 알아보기 > </a>
</div>
</li>
</ul>
<div class="slide-item slide-button-container">
<button class="slide-button slide-left-button" onclick="slidePrev(1000);">〈</button>
<button class="slide-button slide-right-button" onclick="slideNext(1000);">〉</button>
</div>
<ul class="slide-item slide-pagination">
</ul>
</div>
</div>
CSS
.slide-wrapper {
padding: 0px;
overflow: hidden;
height: calc(1000px + 50px);
position: relative;
}
@media (max-width: 500px) {
.slide-wrapper {
height: calc(500px + 50px);
}
}
.slide-slides {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
}
/* 슬라이드 아이템 */
.slide-slide {
height: 1000px;
position: relative;
left: 0px;
}
@media (max-width: 500px) {
.slide-slide {
display: 500px; ?뭐지;
}
}
.slide-button-container {
position: absolute;
top:0;
width: 100%;
height: calc(100% - 50px);
}
.slide-button-container {
display: none;
}
/* 슬라이드 버튼 */
.slide-button {
width: 50px;
height: 50px;
border-radius: 25px;
border-width: 0px;
line-height: 50px;
font-weight: bold;
background-color: rgba(210,210,210,0.64);
color: rgba(0,0,0,0.5);
font-size: 25px;
cursor: pointer;
font-family: SF Pro Icons,AOS Icons;
}
/* 왼쪽 슬라이드 버튼 */
.slide-left-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 22px;
}
/* 오른쪽 슬라이드 버튼 */
.slide-right-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 22px;
}
/* 슬라이드 페이지네이션 */
.slide-pagination {
position: absolute;
display: flex;
width: fit-content;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
}
.slide-pagination-item {
/*
선택된 아이템 색상 : #000000cc
선택되지 않은 아이템 색상 : #0000006b
*/
background-color: #0000006b;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 11px;
cursor: pointer;
border: 0px;
}
.curr-slide-pagination-item {
background-color: #000000cc;
}
Javascript(jQuery)
let slide_curr = 1;
let slide = document.querySelector(".slide-slides");
let slide_items = slide.children;
let slide_min = 1;
let slide_max = slide_items.length;
let slide_pagination = document.querySelector(".slide-pagination");
/* 슬라이드 페이지네이션 생성 */
for (let i = 0; i < slide_max; i++) {
if (i == 0) {
slide_pagination.innerHTML += "<li class='slide-pagination-item curr-slide-pagination-item'></li>";
} else {
slide_pagination.innerHTML += "<li class='slide-pagination-item'></li>";
}
}
function slideSlide(slideSpeed, targetPage) {
console.log("slideSlide");
$(".slide-slide").css("transition", "left " + slideSpeed + "ms");
$(".slide-slide").css("left", "-" + ((targetPage - 1) * 100) + "%");
document.querySelector(".curr-slide-pagination-item").className = "slide-pagination-item";
$(".slide-pagination-item")[targetPage - 1].className = "slide-pagination-item curr-slide-pagination-item";
slide_curr = targetPage;
}
function slideNext(slideSpeed) {
if (slide_curr < slide_max) {
slideSlide(slideSpeed, slide_curr + 1);
} else {
slideSlide(slideSpeed, slide_min);
}
}
function slidePrev(slideSpeed) {
if (slide_curr > slide_min) {
slideSlide(slideSpeed, slide_curr - 1);
} else {
slideSlide(slideSpeed, slide_max);
}
}
$(".slide-pagination-item").on("click", function () {
let slide_target = $(this).index() + 1;
slideSlide(1000, slide_target);
});
/* 이벤트 */
let slideWrap = document.querySelector(".slide-wrapper");
let startPoin = 0;
let endPoint = 0;
// PC 클릭 이벤트 (드래그)
slideWrap.addEventListener("mousedown", (e) => {
startPoint = e.pageX; // 마우스 드래그 시작 위치 저장
});
slideWrap.addEventListener("mouseup", (e) => {
endPoint = e.pageX; // 마우스 드래그 끝 위치 저장
if (startPoint < endPoint) {
// 마우스가 오른쪽으로 드래그 된 경우
slidePrev(1000);
} else if (startPoint > endPoint) {
// 마우스가 왼쪽으로 드래그 된 경우
slideNext(1000);
}
});
/* 터치 이벤트 */
slideWrap.addEventListener("touchstart", (e) => {
startPoint = e.touches[0].pageX; // 터치가 시작되는 위치 저장
});
slideWrap.addEventListener("touchend", (e) => {
endPoint = e.changedTouches[0].pageX; // 터치가 끝나는 위치 저장
if (startPoint < endPoint) {
// 오른쪽으로 스와이프 된 경우
slidePrev(1000);
} else if (startPoint > endPoint) {
// 왼쪽으로 스와이프 된 경우
slideNext(1000);
}
});
// 기본적으로 슬라이드 루프 시작하기
let loopInterval = setInterval(() => {
slideNext(1000);
}, 5000);
// 슬라이드에 마우스가 올라간 경우 루프 멈추기
slideWrap.addEventListener("mouseover", () => {
clearInterval(loopInterval);
});
// 슬라이드에서 마우스가 나온 경우 루프 재시작하기
slideWrap.addEventListener("mouseout", () => {
loopInterval = setInterval(() => {
slideNext(1000);
}, 5000);
});
참고 사이트 : https://devinus.tistory.com/48