swiper 복습

이번에는 swiper를 복습해보려고 한다.

 

https://swiperjs.com/get-started

 

위 사이트에 들어가서 왼쪽의 CDN을 클릭하여 이동하고, 소스를 html에 붙여넣기한다.

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

 

 

 

https://swiperjs.com/demos

Swiper Demos

demos에 들어가면 여러가지 형태의 슬라이더를 볼 수 있다.

 

 

 

제일 기본적인 형태

 

 

core를 누르면 소스코드가 나온다.

 

<div class="swiper mySwiper">

    <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 class="swiper-slide">Slide 4</div>

      <div class="swiper-slide">Slide 5</div>

      <div class="swiper-slide">Slide 6</div>

      <div class="swiper-slide">Slide 7</div>

      <div class="swiper-slide">Slide 8</div>

      <div class="swiper-slide">Slide 9</div>

    </div>

  </div>

기본 형태

 

var swiper = new Swiper(".mySwiper", {});

js 코드

 

css코드도 다 나와있기 때문에 적절히 수정하여 사용하면 된다..

 

 

화살표 버튼 추가

  <div class="swiper mySwiper">

    <div class="swiper-wrapper">

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

    </div>

    <div class="swiper-button-next"></div>

    <div class="swiper-button-prev"></div>

  </div>

기본 형태

var swiper = new Swiper(".mySwiper", {

  navigation: {

    nextEl: ".swiper-button-next",

    prevEl: ".swiper-button-prev",

  },

});

js 코드

 

등등 여러가지 옵션을 추가할 수 있다.

 

 

 

<div class="swiper mySwiper">

    <div class="swiper-wrapper">

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

      <div class="swiper-slide"><img src="images/background08.jpg" alt=""></div>

    </div>

    <div class="swiper-button-next"><i class="xi-angle-right-thin"></i></div>

    <div class="swiper-button-prev"><i class="xi-angle-left-thin"></i></div>

  </div>

.swiper-button-next,

.swiper-button-prev {

  font-size: 0;

  color: transparent;

}

.swiper-button-next::after,

.swiper-button-prev::after {

  display: none;

}

i {

  color: #000;

  font-size: 50px;

}

화살표 아이콘 바꾸기 (head에 xeicon cnd 넣기)