owl carousel slider 다운및 사용법

owl 슬라이더를 적용시켜 보자

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

위사이트를 들어가면 owl carousel slider를 다운받을수 있다.

다운받은 파일의 압출을 풀면

여러개의 파일이 나오는데

docs 폴더에서

demo에 들어가면 

데모버전들을 볼수 있다.

데모 버전을 확인하면서 원하는 모양을 선택할수 있다.

docs/assets

/assets/owlcarousel/assets/owl.carousel.min.css

/assets/owlcarousel/assets/owl.theme.default.min.css

/assets/vendors/jquery.min.js

/assets/owlcarousel/owl.carousel.js

/assets/vendors/jquery.min.js

다음 파일들을 내 폴더에 복사해주고 연결

    <!--  Demos -->
    <section id="demos">
      <div class="row">
        <div class="large-12 columns">
          <h4 id="center-with-loop">Center with loop</h4>
          <div class="loop owl-carousel owl-theme">
            <div class="item">
              <h4>1</h4>
            </div>
            <div class="item">
              <h4>2</h4>
            </div>
            <div class="item">
              <h4>3</h4>
            </div>
            <div class="item">
              <h4>4</h4>
            </div>
            <div class="item">
              <h4>5</h4>
            </div>
            <div class="item">
              <h4>6</h4>
            </div>
            <div class="item">
              <h4>7</h4>
            </div>
            <div class="item">
              <h4>8</h4>
            </div>
            <div class="item">
              <h4>9</h4>
            </div>
            <div class="item">
              <h4>10</h4>
            </div>
            <div class="item">
              <h4>11</h4>
            </div>
            <div class="item">
              <h4>12</h4>
            </div>
          </div>
 
          <script>
            jQuery(document).ready(function($) {
              $('.loop').owlCarousel({
                center: true,
                items: 2,
                loop: true,
                margin: 10,
                responsive: {
                  600: {
                    items: 4
                  }
                }
              });
              $('.nonloop').owlCarousel({
                center: true,
                items: 2,
                loop: false,
                margin: 10,
                responsive: {
                  600: {
                    items: 4
                  }
                }
              });
            });
          </script>
        </div>
      </div>
    </section>