API 사용하기(Swiper)

| 오픈 API(Application Programming Interface)

오픈 API는 웹을 통해 공개된 API로, 이를 이용하여 개발자가 모바일 어플리케이션등 다양한 컨텐츠를 용이하게 개발할 수 있게 하는 방식이다. 즉, 누구나 사용할 수 있도록 공개된 API라 할 수 있다.

​

API 종류

GPS 및 날씨 API, SNS 로그인 API, 문자 API > ex) 인증번호, 이메일 API

지도 API(카카오, 구글), 주소 API(주소기반 산업지원서비스, 카카오), CKEditor 5

별점 플러그인 API, 플러그인 - 아코디언,데이트피커, 모달창

등 다양하게 많다.

​

이러한 오픈 API를 이용하여 웹 사이트를 나만의 입맛대로 작성할 수 있다.

​

반응형 슬라이더인 Swiper API를 사용

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

https://codesandbox.io/s/sg7pfe?file=/index.html:1544-2724

Swiper - Infinite loop - CodeSandbox

>> CSS, JS, HTML을 가져와서 사용

스와이퍼의 다양한 슬라이드 이벤트 중 Infinite Loop 슬라이드 사용하여 내가 넣고 싶은 이미지들을 삽입하였음.

​

HTML에서 CDN 연결

<!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
    />
<!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

 

HTML

 <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/1.jpg" alt="" class="imgbox" /></div>
        <div class="swiper-slide"><img src="./img/2.jpg" alt="" class="imgbox" /></div>
        <div class="swiper-slide"><img src="./img/3.jpg" alt="" class="imgbox" /></div>
        <div class="swiper-slide"><img src="./img/4.jpg" alt="" class="imgbox" /></div>
        <div class="swiper-slide"><img src="./img/5.jpg" alt="" class="imgbox" /></div>
        <div class="swiper-slide"><img src="./img/6.jpg" alt="" class="imgbox" /></div>
        <div class="swiper-slide"><img src="./img/7.jpg" alt="" class="imgbox" /></div>
        <div class="swiper-slide"><img src="./img/8.jpg" alt="" class="imgbox" /></div>
        <div class="swiper-slide"><img src="./img/9.jpg" alt="" class="imgbox" /></div>
        <div class="swiper-slide"><img src="./img/10.jpg" alt="" class="imgbox" /></div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>

 

CSS

 <!-- Demo styles -->
    <style>
      html,body {position: relative;height: 100%;}
      body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}
      .swiper {width: 100%;height: 100%;}
      .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-slide img {display: block;height: 100%;object-fit: cover;}
      .swiper {margin-left: auto;margin-right: auto;}
      .imgbox {background-repeat: no-repeat;background-size: cover;}
    </style>

 

JS

      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });

 

영상 결과 확인 : https://blog.naver.com/yyhhhjun/222832367216

API 사용하기(Swiper)

 

 

https://www.youtube.com/watch?v=ogT267HvNuQ

참고하면 좋을듯