사이트 만들기 1 이미지 슬라이드 (Swiper)

사이트 만들기 1 이미지 슬라이드 (Swiper)

 

 

 

 

💜 사이트만들기 1

코드 보기 / 완성 화면

 

 

 

Swiper 라이브러리를 사용해 자동으로 슬라이드 되는 이미지를 만들었습니다.

 

Swiper

Swiper는 모바일 및 데스크톱에서 사용할 수 있는 강력한 슬라이더 라이브러리 입니다.
이미지 갤러리, 브랜드 로고, 제품 슬라이더 등 다양한 유형의 슬라이더를 지원합니다.

Swriper의  특징으로는
모바일 및 데스크톱에서 모두 작동, 다양한 슬라이드 유형, 다양한 옵션을 사용해 슬라이더를 맟춤 설정, 터치 이벤트 지원, 스와이프 이벤트 지원 등이 있습니다.

Swriper는 오픈소스 라이브러리이므로 누구나 무료로 사용 가능합니다.

 

 

script

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
    const swiper = new Swiper('.swiper', {
        direction: 'horizontal',
        loop: true,

        autoplay: {
            delay:3000,
            disableOnInteraction: false,
        },

        pagination: {
            el: '.swiper-pagination',
            clickable : true,
        },

        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    }); 

    const btnStop = document.querySelector(".swiper-button-stop");
    const btnStart = document.querySelector(".swiper-button-play");

    btnStart.style.display = "none";

    document.querySelector(".swiper-button-play").addEventListener("click", () => {
        swiper.autoplay.start();
        btnStart.style.display = "none";
        btnStop.style.display = "block";
    });
    document.querySelector(".swiper-button-stop").addEventListener("click", () => {
        swiper.autoplay.stop();
        btnStart.style.display = "block";
        btnStop.style.display = "none";
    });
</script>

Swiper 라이브러리를 사용해 자동 슬라이드되는 이미지 갤러리를 만들고, 일시 정지 및 다시 재생하는 기능을 추가하는 코드입니다.

 

 

const swiper = new Swiper(".swiper", {});코드에서는 new Swiper()를 사용해 Swiper 객체를 생성하고, 여러가지 옵션을 설정합니다.

direction은 이미지 슬라이드의 방향을 설정하고, loop 는 이미지가 마지막에도달하면 다시 청므으로 돌아가게 하는 옵션입니다.

 

autiplay 는 자동으로 슬라이드 되는 기능을 설정하고, pagination은 페이지 번호를 나타내는 옵션입니다.

navigation 은 이전/ 다음 버튼을 만드는 옵션입니다.

 

이후에는 document.querySelector를 사용해 HTML 요소를 선택합니다.

btnStop과 btnStart는 정지 및 다시 재생 버튼입니다.

초기에는 btnStart 버튼만 보이게 설정됩니다.

 

addEventListener를 사용해 버튼이 클릭되었을 때, 

swiper.autoplay.start() 또는 swiper.autoplay.stop() 를 호출해 이미지 갤러리의 자동 슬라이드를 시작하거나 정지합니다.

이후 btnStart 과 btnStop 버튼의 style.display 속성을 변경해 각각 버튼이 보이거나 숨기도록 합니다.