swiper slide 사용법

🛹 CSS, jQuery 가져오기

    <!-- swiper CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

    <!-- swiper jQuery -->
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

🍎 정해져 있는 html 태그

클래스명을 맞춰서 만들어주어야 한다.(클래스명 변경 불가)

<!-- swiper슬라이더 메인컨테이너 -->
<div class="swiper-container">
  <!-- 보여지는 영역 -->
  <div class="swiper-wrapper">
    <!-- div class="swiper-slide" 를 추가하면된다 -->
    <div class="swiper-slide">
      <img src="/resource/img/slide1.jpg" alt="이미지를 지원하지 않습니다." />
    </div>
    <div class="swiper-slide">
      <img src="/resource/img/slide2.jpg" alt="이미지를 지원하지 않습니다." />
    </div>
    <div class="swiper-slide">
      <img src="/resource/img/slide3.jpg" alt="이미지를 지원하지 않습니다." />
    </div>
    <div class="swiper-slide">
      <img src="/resource/img/slide4.jpg" alt="이미지를 지원하지 않습니다." />
    </div>
   </div>
  <!-- 페이징 버튼 처리 -->
  <div class="swiper-pagination"></div>

  <!-- 방향 버튼 상황에 따라 추가 삭제가능 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

script

    const swiper1 = new Swiper('.swiper1', {
            //기본 셋팅
            //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
            direction: 'horizontal',
            //한번에 보여지는 페이지 숫자
            slidesPerView: 1,
            //페이지와 페이지 사이의 간격
            spaceBetween: 0,
            //드레그 기능 true 사용가능 false 사용불가
            debugger: true,
            //마우스 휠기능 true 사용가능 false 사용불가
            mousewheel: true,
            //반복 기능 true 사용가능 false 사용불가
            loop: true,
            //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt
            centeredSlides: true,
            // 페이지 전환효과 slidesPerView효과와 같이 사용 불가
            // effect: 'fade',
            speed: 1000,
            //자동 스크를링
            autoplay: {
                //시간 1000 이 1초
                delay: 3500,
                disableOnInteraction: false,
            },
            //페이징
            pagination: {
                //페이지 기능
                el: '.swiper-pagination',
                //클릭 가능여부
                clickable: true,
            },
        });
        const swiper2 = new Swiper('.swiper2', {
            //기본 셋팅
            //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
            direction: 'horizontal',
            //한번에 보여지는 페이지 숫자
            slidesPerView: 1,
            //페이지와 페이지 사이의 간격
            spaceBetween: 0,
            //드레그 기능 true 사용가능 false 사용불가
            debugger: true,
            //마우스 휠기능 true 사용가능 false 사용불가
            mousewheel: true,
            //반복 기능 true 사용가능 false 사용불가
            loop: false,
            //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt
            centeredSlides: true,
            // 페이지 전환효과 slidesPerView효과와 같이 사용 불가
            // effect: 'fade',
            speed: 1000,
            //자동 스크를링
            autoplay: {
                //시간 1000 이 1초
                delay: 3500,
                disableOnInteraction: false,
            },
            //페이징
            pagination: {
                //페이지 기능
                el: '.swiper-pagination',
                //클릭 가능여부
                clickable: true,
                type: 'bullets',
            },
        });


// 상세 예시
const swiper = new Swiper('.swiper-container', {
        //기본 셋팅
        //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
        direction : 'horizontal',
        //한번에 보여지는 페이지 숫자
        slidesPerView : 1,
        //페이지와 페이지 사이의 간격
        spaceBetween : 30,
        //드레그 기능 true 사용가능 false 사용불가
        debugger : true,
        //마우스 휠기능 true 사용가능 false 사용불가
        mousewheel : true,
        //반복 기능 true 사용가능 false 사용불가
        loop : true,
        //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt
        centeredSlides : true,
        // 페이지 전환효과 slidesPerView효과와 같이 사용 불가
        // effect: 'fade',
        speed : 1000,
        //자동 스크를링
        autoplay : {
            //시간 1000 이 1초
            delay : 3500,
            disableOnInteraction : false,
        },
        //페이징
        pagination : {
            //페이지 기능
            el : '.swiper-pagination',
            //클릭 가능여부
            clickable : true,
        },
        //방향표
        navigation : {
            //다음페이지 설정
            nextEl : '.swiper-button-next',
            //이전페이지 설정
            prevEl : '.swiper-button-prev',
        },
    });

swiper slide를 여러개 사용할 수도 있다.

 

 

 

위의 코드를 복사해서 테스트를 해볼 경우,

 

script는 1개만 사용하며, script의 const swiper1 = new Swiper('.swiper1', { 부분을

const swiper = new Swiper('.swiper-container', { 로 클래스명을 html 태그의 클래스와 동일시 시켜주어야

 

슬라이드가 작동된다❗