Notice
Recent Posts
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
관리 메뉴

공부기록용

Swiper(1) 기본 사용 및 옵션 정리 본문

💡깨달음💡/라이브러리+플러그인+API

Swiper(1) 기본 사용 및 옵션 정리

과부하가즈아 2024. 5. 2. 16:49

슬라이드를 구현할 수 있는 플러그인 

 

https://swiperjs.com/

 

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

CDN으로 연결하기(min: 압축파일)

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

<!-- Swiper js -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

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

swiper의 기본 구조는 

제일 상단에 .swiper 중간단에 .swiper-wrapper 마지막 슬라이드 하나하나가 .swiper-slide라는 class명을 가지고 있다.

 

그 외 사용하는 것으로는

 

페이지네이션을 위한 .swiper-pagination

 

슬라이드의 이동을 위한 네비게이션은 .swiper-button-prev과 . swiper-button-next

 

스크롤바는 .swiper-scrollbar의 class명을 사용해준다.

 

해당 class명을 사용해주면 swiper의 기본옵션 및 css가 적용되어진다. 

 

📌기본적용📌

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />

    <!-- JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <title>Document</title>
    <style>
      .swiper {
        width: 600px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <!-- 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>

    <script>
      const swiper = new Swiper(".swiper", {
        pagination: {
          el: ".swiper-pagination",
        },

        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },

        scrollbar: {
          el: ".swiper-scrollbar",
        },
      });
    </script>
  </body>
</html>

옵션

swiper을 위한 다양한 옵션이 존재한다.

 

슬라이드 관련 옵션

// direction(슬라이드 방향)
direction: 'horizontal' // 기본_수평 슬라이드
direction: 'vertical' // 수직 슬라이드
// slidesPerView(한 슬라이드에 보여줄 갯수)
slidesPerView: 1 // 기본
slidesPerView: 'auto' // 슬라이드의 넓이나 높이에 따라 자동계산

// spaceBetween(슬라이드 사이 여백)
spaceBetween: 0 // 기본

// centeredSlides(슬라이드를 중앙으로 배치)_첫 슬라이드가 중앙으로 배치된다.
centeredSlides: true // 기본_센터모드
// loop(슬라이드 루프 설정)
loop: true // 기본_무한루프
loop: false // 루프 설정 X

 

loop: true로 지정할 경우 마지막 슬라이드에서 처음슬라이드로 이동은 하지만 화면상으로는 다음슬라이드가 없는거 처럼 보이다가 누르면 막상 첫슬라이드로 이동한다(부자연스러움) 이때 loopAdditionalSlides을 추가해줌으로써 자연스럽게  슬라이드가 뒤에도 계속 있는거처럼  끊기지 않게 보이게 된다.

 

// loopedSlides(loop시 종료/시작전에 슬라이드 수를 정의)
slidePerview: 1 // 기본


// loopAdditionalSlides(슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정)
loopAdditionalSlides: 1

 

// autoplay(자동재생여부)
// false(자동재생끔_기본), true(자동재생켬), delay(자동재생딜레이시간ms
autoplay: false // 기본
autoplay: true
// autoplay의 추가 옵션
autoplay: {
  // 슬라이드가 자동으로 이동하는 시간 간격
  delay: 3000(기본값),
  
  // disableOnInteraction true로 지정시 사용자 조작시 autoplay의 지속 여부를 결정 사용자 조작이란 이전,다음 버튼클릭 마우스로 슬라이더 이동 등을 의미
  disableOnInteraction: false(기본값), 
  
   // pauseOnMouseEnter true로 지정시 슬라이더 위에 마우스를 올리면 autoplay가 자동으로 정지, 떼면 다시 시작을 의미
  pauseOnMouseEnter: false(기본값),
  
  // stopOnLastSlide true로 지정시 마지막 슬라이드에서 자동 슬라이드를 멈추는 옵션
  // loop를 true로 설정했다면 그 의도가 충돌되는 것이므로 상황에 맞게 선택해야 함
  stopOnLastSlide: false(기본값)
},

 

// speed(슬라이드 애니메이션 속도_ms)
speed: 300 // 기본
// effect(슬라이드 애니메이션 효과)
effect: slide // 기본
effect: fade
effect: cube
effect: coverflow
effect: flip

pagination 옵션

// pagination(페이징 설정 여부)
// false(끔_기본), true(켬), type(종류_bullets, fraction, progressbar, custom)
pagination: {
  el: ".swiper-pagination",
  clickable: true,  // 클릭시 slide 이동 여부
  type: "bullets",
},

navigation 옵션

// navigation(이전/다음 버튼 설정 여부)
// false(끔_기본), true(켬), nextEl, prevEl
navigation: {
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
},

scrollbar 옵션

// scrollbar(스크롤바 설정 여부)
// false(끔_기본), true(켬), hide(숨김)
scrollbar: {
  el: ".swiper-scrollbar",
  hide: true,
},

 

 

 

🔗참고🔗

https://velog.io/@yeonjin1357/JS-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-Swiper.js%EC%9D%98-%EB%AA%A8%EB%93%A0-%EA%B2%83

https://solbel.tistory.com/187

'💡깨달음💡 > 라이브러리+플러그인+API' 카테고리의 다른 글

kakao developer - map 적용하기(2)  (0) 2024.05.02
kakao developer - map 사용하기(1)  (0) 2024.05.02
Swiper(3) pagination, navigation 커스텀하기  (0) 2024.05.02
Swiper(2) 한 페이지에 다중 swiper적용하기  (2) 2024.05.02
'💡깨달음💡/라이브러리+플러그인+API' Related Articles more
Comments