[js] swiper slide (progressbar 프로그래스바 , 위치 css 변경)

 

https://swiperjs.com/get-started

Getting Started With Swiper

 

1. CDN 연결

먼저 swiper 연결 시 css와 js를 연결 해주어야 합니다.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
  />

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

2. HTML / JS 연결

*HTML*

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

*JS*

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical', //방향
  loop: true, //무한 반복
  loopedSlides: 1, //loop시 duplicate 개수
  
  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
    type: 'progressbar', //프로그래스바 설정

  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

3. CSS 설정

.swiper {
  width: 600px;
  height: 300px;
}

/*슬라이드 내용*/
 .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        
      }

/*프로그래스바 하단에 위치*/
.swiper-pagination { top: 95% !important; }

 

+프로그레스바를 하단에 노출시키기 위해 top값을 강제로 설정하였습니다.

 

4. 결과물 확인

See the Pen Untitled by emilykoh (@emilykoh) on CodePen.

 

*본 게시물은 학습을 위한 개인 기록용입니다.

잘못되었거나 더 효율적인 방법이 있다면 공유 부탁드립니다! 감사합니다.