8줄의 자바스크립트 슬라이더

이 게시물에서는 종속성이 없는 최소한의 JavaScript 슬라이더를 빌드합니다. 실제로 실제 슬라이드의 HTML 콘텐츠가 없는 가장 작은 것: 8줄의 JavaScript입니다.

슬라이더나 텍스트 로테이터를 만들 때 엄청난 양의 JavaScript를 사용해서는 안 되며 최신 CSS를 최대한 활용해야 합니다.

이 자습서의 요령은 CSS 애니메이션 타이밍을 JavaScriptsetInterval() 값과 일치시키는 것입니다.

이것이 우리가 만들 것입니다:



이 경우 하나<div> 요소인 HTML 코드부터 시작하겠습니다.

<div id="slider--text"></div>

나중에 JavaScript를 사용하여 이 요소를 채울 것입니다.

스타일 지정은 선택 사항이지만 이 튜토리얼을 위해 세로 및 가로 방향으로 콘텐츠를 가운데 정렬하도록 슬라이더의 스타일을 지정했습니다. 불투명도와 변환 속성을 추가한 기본 애니메이션도 사용했습니다.

.fade-in {
    animation: fade 4s infinite;
}

내 4초 애니메이션이 아래 코드의 4000밀리초와 어떻게 일치하는지 확인하십시오.

다음으로 요소가 존재하는지 확인하여 JavaScript "슬라이딩"기능을 추가하고, 존재하는 경우 슬라이드할 문자열 배열을 생성합니다. HTML을 사용할 수 있습니다.

다음으로 슬라이드를 반복하고 #slider--text 요소 내부의 HTML을 슬라이드 콘텐츠로 대체하여 슬라이더를 만듭니다. 그게 다야!

다음으로 슬라이더가 즉시 실행되도록 호출한 다음 setInterval() 함수를 사용하여 4초마다 호출합니다.

JavaScript 코드의 요지는 다음과 같습니다.

const slider = () => {
    document.getElementById("slider--text").innerHTML = slides[i];
    document.getElementById("slider--text").classList.add('fade-in');

    (i < slides.length - 1) ? i++ : i = 0;
};

setInterval(slider, 4000); // Slide every 4 seconds

JavaScript code for a full breakdown and a slider demo 을 확인하십시오.