외부라이브러리 - owl-carousel

Owl Carousel

회전목마 : 여러개의 사진이 자동으로 돌아가게 하는 lib

 

유사 라이브러리 : swiper

 

 

공식 홈페이지

https://isotope.metafizzy.co/

 

 

cdn 과 npm 둘 중 하나를 선택해서 사용

owlcarousel.zip

0.04MB

위의 ZIP 파일을

public/lib 에 넣기

 

 

공식 홈페이지

https://owlcarousel2.github.io/OwlCarousel2/

 

CDN

HEADER
<!-- 4) owl.carousel css :  https://owlcarousel2.github.io/OwlCarousel2/ -->
  <link href="/lib/owlcarousel/assets/owl.carousel.css" rel="stylesheet">
  <link href="/lib/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet">
  
 BODY
    <!-- 4) owl.carousel css :  https://owlcarousel2.github.io/OwlCarousel2/ -->
  <script src="/lib/owlcarousel/owl.carousel.min.js"></script>

 

필자는 typescript 사용

type 설치

npm i @types/owl.carousel

 

사용법

     	사용법 : 컨텐츠1 ~ 컨텐츠n까지 돌아감
        => html : 
        <div className="owl-carousel owl-theme 클래스명">
            <div> 컨텐츠 </div>
                   ...
            <div> 컨텐츠 </div>
        </div>

        => js : 
        $(선택자).owlCarousel({
          옵션
        autoplay: true,     // 자동으로 이미지가 돌아가는 설정
        smartSpeed: 1000,   // 이미지가 변경될때 변경 속도
        nav : true,         // 메뉴버튼
        items : 1,          // 하나씩 돌림
        loop: true          // loop
        })

 

 

 

< 간단한 예제 >

사용해 봅시다

src/lib/initMain.ts

// initMain.ts

export default function initMain() {
    // TODO :  Owl-Carousel
    // 사용법 : $(선택자).owlCarousel({옵션})
    $(".carousel-div").owlCarousel({
        autoplay: true,
        smartSpeed: 1000,
        nav : true,
        items : 1,
        loop: true
    })
}

 

 

컴포넌트

import React, { useEffect } from "react";
import initMain from "../assets/js/initMain";

function OwlCarouselCom() {
  useEffect(()=> {
    initMain();
  },[])
  return (
    <div>
      <div className="owl-carousel carousel-div owl-theme">
        <div className="position-relative mb-5">
          <img
            className="img-fluid rounded-circle border border-secondary p-2 mx-auto"
            src={require("../assets/img/testimonial/testimonial-1.jpg")}
            alt=""
          />
        </div>

        <div className="position-relative mb-5">
          <img
            className="img-fluid rounded-circle border border-secondary p-2 mx-auto"
            src={require("../assets/img/testimonial/testimonial-2.jpg")}
            alt=""
          />
        </div>

        <div className="position-relative mb-5">
          <img
            className="img-fluid rounded-circle border border-secondary p-2 mx-auto"
            src={require("../assets/img/testimonial/testimonial-3.jpg")}
            alt=""
          />
        </div>
      </div>
    </div>
  );
}

export default OwlCarouselCom;