파노라마 캐러셀을 구현하기 위한 HTML+CSS 샘플 코드

 <div 클래스="컨테이너">
    <div id="슬라이드">
        <div class="item" style="Background-image:url('./img/Zhang Ruonan01.jpg')"></div>
        <div class="item" style="Background-image:url('./img/Ju Jingyi01.jpg')"></div>
        <div class="item" style="Background-image:url('./img/Ju Jingyi02.jpg')"></div>
        <div class="item" style="Background-image:url('./img/Ju Jingyi06.jpg')"></div>
        <div class="item" style="Background-image:url('./img/Ju Jingyi04.jpg')"></div>
        <div class="item" style="Background-image:url('./img/Ju Jingyi07.jpg')"></div>
    </div>
    <div 클래스="버튼">
        <div 클래스="왼쪽">
            < 이전</div>
                <div class="center">배경화면 다운로드</div>
                <div class="right">다음 ></div>
        </div>
    </div>
</div>

 * {
    여백: 0;
    패딩: 0;
    상자 크기 조정: 테두리 상자;
}
.컨테이너 {
    폭: 100vw;
    높이: 100vh;
    위치: 상대;
    오버플로: 숨김;
}
.항목 {
    너비: 240px;
    높이: 160px;
    위치: 절대;
    최고: 50%;
    왼쪽: 0;
    변환: 번역Y(-50%);
    테두리 반경: 10px;
    상자 그림자: 0 30px 50px #505050;
    배경 크기: 표지;
    배경 위치: 중앙;
    전환: 1초;
}
.item:n번째-자식(1),
.item:n번째-자식(2) {
    왼쪽: 0;
    상단: 0;
    너비: 100%;
    높이: 100%;
    변환: 번역Y(0);
    상자 그림자: 없음;
    테두리 반경: 0;
}
.item:n번째-자식(3) {
    왼쪽: 70%;
}
.item:n번째-자식(4) {
    왼쪽: 계산(70% + 250px);
}
.item:n번째-자식(5) {
    왼쪽: calc(70% + 500px);
}
.item:n번째-자식(n+6) {
    왼쪽: 계산(70% + 750px);
    불투명도: 0;
}
.버튼 {
    너비: 100%;
    위치: 절대;
    하단: 50px;
    여백 왼쪽: -50px;
    텍스트 정렬: 중앙;
    디스플레이: 플렉스;
    내용 정당화: 센터;
}
.버튼 div {
    너비: 120px;
    높이: 50px;
    줄 높이: 50px;
    텍스트 정렬: 중앙;
    테두리 반경: 5px;
    여백: 0 25px;
    전환: 0.5초;
    커서: 포인터;
    사용자 선택: 없음;
    글꼴 크기: 20px;
    색상: #fff;
    배경색: rgba(0, 0, 0, 0.4);
    상자 그림자: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

 const leftBtn = document.querySelector(".buttons .left")
const rightBtn = document.querySelector(".buttons .right")
const 슬라이드 = document.querySelector("#슬라이드")
let openClick = true // 스로틀 처리(애니메이션 실행 프로세스를 보장하기 위해 버튼이 반복적으로 클릭되지 않음)
leftBtn.addEventListener("클릭", () => {
  if (오픈클릭) {
    openClick = false // 클릭을 유발한 후 버튼을 비활성화합니다. const items = document.querySelectorAll(".item")
    Slide.prepend(항목[items.length - 1])
    setTimeout(() => openClick = true, 1000) // 버튼을 다시 여는 데 1초}
})
rightBtn.addEventListener("클릭", () => {
  if (오픈클릭) {
    오픈클릭 = 거짓
    const items = document.querySelectorAll(".item")
    슬라이드.appendChild(항목[0])
    setTimeout(() => openClick = true, 1000)
  }
})

 * {
  여백: 0;
  패딩: 0;
  상자 크기 조정: 테두리 상자;
}

 .컨테이너 {
  폭: 100vw;
  높이: 100vh;
  위치: 상대;
  오버플로: 숨김;
}

 .항목 {
  너비: 240px;
  높이: 160px;
  위치: 절대;
  최고: 50%;
  왼쪽: 0;
  변환: 번역Y(-50%);
  테두리 반경: 10px;
  상자 그림자: 0 30px 50px #505050;
  배경 크기: 표지;
  배경 위치: 중앙;
  전환: 1초;
}

 .item:n번째-자식(1),
.item:n번째-자식(2) {
  왼쪽: 0;
  상단: 0;
  너비: 100%;
  높이: 100%;
  변환: 번역Y(0);
  상자 그림자: 없음;
  테두리 반경: 0;
}

 .item:n번째-자식(3) {
  왼쪽: 70%;
}

 .item:n번째-자식(4) {
  왼쪽: 계산(70% + 250px);
}

 .item:n번째-자식(5) {
  왼쪽: calc(70% + 500px);
}

 .item:n번째-자식(n+6) {
  왼쪽: 계산(70% + 750px);
  불투명도: 0;
}

 .버튼 {
  너비: 100%;
  위치: 절대;
  하단: 50px;
  여백 왼쪽: -50px;
  텍스트 정렬: 중앙;
  디스플레이: 플렉스;
  내용 정당화: 센터;
}

 .버튼 div {
    너비: 120px;
    높이: 50px;
    줄 높이: 50px;
    텍스트 정렬: 중앙;
    테두리 반경: 5px;
    여백: 0 25px;
    전환:.5초;
    커서: 포인터;
    사용자 선택: 없음;
    글꼴 크기: 20px;
    색상: #fff;
    배경색: rgba(0, 0, 0, 0.4);
    상자 그림자: 2px 2px 2px rgba(0, 0, 0, 0.2);
}