Javascript, Swiper slider Plugin 사용하기

반응형

오늘은 공부하면서 사용한 slider 플러그인 중 하나인 "Swiper" plugin을 가져왔습니다.

jQuery 공부 도중 슬라이더에 대한 플러그인이 있더라구요 javascript로 짜여있지만 좋았습니다.

swiper Main page

 

설치 방법부터 기본 적용까지 + multiple swiper 사용하기 까지 써보려고 합니다.


기본 설정

1. 먼저 로고 하단의 [Get Started] 를 Click

swiper 1.시작

주로 CDN을 사용하기 때문에 [Use Swiper from CDN] 있는 영역으로 갑니다.

<html>
<head>
<title>swiper</title>
<!-- swiper css 연결-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<!-- swiper js 연결-->
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
</head>
<body>
...

 

2. slide 코드를 작성할 <script> 혹은 js폴더에 js 파일을 불러올 때

</body> 바로 위에다 작성해 줍니다.

<body>
...

<!-- swiper 적용 예 1 -->
<script>
	swiper js 실행문
</script>

<!--siwper 적용 예 2 -->
<script src="폴더명/slide(파일명).js"></script>

</body>

 

3.body 사이에 swiper 기본형식을 사용하기 위해 마크업을 합니다. (cdn 바로 아래 [Add Swiper HTML Layout] 참고)

<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>
    ... <!--slider 개수만큼 추가 -->
  </div>
  
  <!-- 페이지 번호 표시하기 위해 동그라미 버튼이 필요하다면 추가  -->
  <div class="swiper-pagination"></div>

  <!-- 좌/우 화살표 추가 할거면 추가 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- 스크롤바로 슬라이드를 넘기고 싶다면? 추가 -->
  <div class="swiper-scrollbar"></div>
</div>

</body>

사용해보기

1.Demos에 들어가서 자신이 써보고자 하는 모양을 고른다.

swiper demos

간단한 예시로 [Demos]-[Infinite loop] 모양을 만들어 보기로한다.

 

2.원하는 모양을 찾았으면 자신이 원하는 언어를 클릭하자.

(javascript 를 사용한다면 Code 클릭)

 

3.해당 code의 script를 찾아 ctrl+c / ctrl+v 복붙을 하면 끝

infinite loop script

css는 html 마크업 보시면서 약간씩 수정 합시다.

마크업 또한 CODE 에서 html 보시고 하시면 됩니다.


multiple slider(swiper 기초 응용편)

웹페이지를 보다보면 슬라이더가 1개가 아닌 2개 이상 사용하는 경우가 있다.

홈페이지를 뜯어보면 플러그인을 1개만 사용하는 경우는 드물다.

 

다른 플러그인이 어려워서 swiper만 사용하고 싶다고 할 때 하는 방법 ↓↓

★1. class 수정

<!-- Swiper 1 -->
   <div class="swiper 스와이퍼1">  //That's here
    
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      
      <!--좌/우 버튼-->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      
      <!-- 페이지번호 -->
      <div class="swiper-pagination"></div>
   </div>
   
<!-- Swiper 2 -->
 <div class="swiper 스와이퍼2">  //That's here
    
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      
      <!--좌/우 버튼-->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      
      <!-- 페이지번호 -->
      <div class="swiper-pagination"></div>
   </div>

 

스와이퍼1, 스와이퍼2 의 클래스명만  순서대로 적어준 뒤

각각에 대해 swiper api를 적용시키면 된다.

class='swiper'는 css 에서 width값과 height 값만 설정해주기 때문에 크게 신경쓰지는 말자.

 

★2. 각각의 스와이퍼 js 설정.

//원하는 swiper 의 demo를 참고.

//swiper1 = just loop slider
const swiper1 = new Swiper('.스와이퍼1',{
        loop: true,
        spaceBetween: 10,
        slidesPerView: 3,
        freeMode: true,
        watchSlidesProgress: true,
});

//swiper2 = thumbnail swiper
const swiper2 = new Swiper('.스와이퍼2',{
        loop: true,
        spaceBetween: 10,
        thumbs: {
          swiper: swiper2,
        },
});

const swiper3 = new Swiper('.스와이퍼3',{
	
    //swiper 옵션
    
});

각 변수명에 새로운 Swiper 객체를 달아 준 뒤 스와이퍼 값만 따로 바꿔주자.

(swiper 옵션은 자신이 좋아하는 걸로)


css 수정은 자손or자식 선택자 방식을 선택했습니다.

//버튼을 따로 적용할 때

.스와이퍼1 button {
  width: 360px;
  height: 35px;
  border: none;
  border-radius: 5px;
  background-color: rgba(100, 160, 210, 0.6);
  font-weight: bold;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
}


.스와이퍼2 button{
	width:300px;
    height:100px;
    font-size:0.75rem;
    border:none;
    background-color:aqua;
}

.스와이퍼3 button{  //navigation options을 뺀 것과 같음.
	display:none;
}

개인 공부용으로 정리해 논 것들이라 부족한 부분이 있습니다. (후에 조금씩 수정할 예정)

틀린부분이나 이러한 것들을 추가하면 좋겠다는 조언은 댓글로 남겨주시면 감사합니다.

반응형

댓글

Designed by JB FACTORY