23.05.02 코딩일기

오늘의 블로그는 코딩 일기입니다!

 

오늘은 사이트의 슬라이드 영역을 스와이퍼를 사용하여  간단하게 구현해 보았습니다.

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

스와이퍼도 gsap jquery와 같이 라이브러리 cdn를 가져와 사용합니다.

<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: 1000,
            disableOnInteraction: false,
        },

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

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    document.querySelector(".swiper-button-play").style.display = "none";

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

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

이런 사이트들을 많이 알아두면 유용하게 쓸거 같다.

• direction: 'horizontal': 스와이퍼의 방향을 수평으로 설정합니다.
• loop: true: 슬라이드를 무한 반복할 수 있습니다.
• autoplay: 자동 재생 설정을 제어하는 ​​객체:
  • delay: 1000: 슬라이드 전환 사이의 지연 시간을 1초(1000밀리초)로 설정합니다.
  • disableOnInteraction: false: 사용자가 스와이퍼와 상호작용할 때 자동 재생 중지를 비활성화합니다.
• pagination: 페이지 매김을 설정하는 객체:
  • el: '.swiper-pagination': 페이지 매김 요소에 대한 선택자 문자열입니다.
  • clickable: true: 페이지 매김 글머리 기호를 클릭하여 해당 슬라이드로 이동할 수 있습니다.
• navigation: 탐색 화살표를 설정하는 객체:
  • nextEl: '.swiper-button-next': 다음 화살표 요소에 대한 선택자 문자열입니다.
  • prevEl: '.swiper-button-prev': 이전 화살표 요소에 대한 선택자 문자열입니다.