캐러셀 구현 - owl carousel 플러그인 (feat. jquery)

Owl Carousel 플러그인은 터치스크린 지원, 자동 스크롤, 속도 조절, 오른쪽에서 왼쪽으로 스크롤등 여러가지 기능을 갖추고 있습니다. 특징은 화면상에 1개부터 n개까지 이미지를 표시가 가능하다는 것입니다.

github.com/OwlCarousel2/OwlCarousel2

OwlCarousel2/OwlCarousel2

owl.carousel.css

0.00MB

owl.theme.default.css

0.00MB

jquery-2.2.4.min.js

0.08MB

owl.carousel.min.js

0.04MB

owl.autoplay.js

0.00MB

owl.navigation.js

0.01MB

---

html 본문

<div class="owl-carousel">

                <div class="item"><img src="./images/puppy-1.jpeg" alt=""></div>

                <div class="item"><img src="./images/puppy-2.jpeg" alt=""></div>

                <div class="item"><img src="./images/puppy-3.jpeg" alt=""></div>

                <div class="item"><img src="./images/kitten-1.jpeg" alt=""></div>

                <div class="item"><img src="./images/kitten-2.jpeg" alt=""></div>

                <div class="item"><img src="./images/kitten-3.jpeg" alt=""></div>

     </div>

보여주고 싶은 이미지를 item에 넣고, 이 item을 owl-carousel로 감싼다.

---

script 내용

  $(function(){

                $('.owl-carousel').owlCarousel({});

            });

---

owlCarousel( ) 의 옵션들      

 $(function(){

                $('.owl-carousel').owlCarousel({

                    items:3,      // 화면에 표시할 항목 개수

                    margin:10,    // 항목과 항목 사이의 간격주기 margin-right

                    loop:true,      // 무한 반복

                    autoplay:true,   // 자동 스크롤 실행

                    autoplayTimeout:3000,   // 자동 스크롤할 때 시간 간격, 밀리초 단위

                    autoplayHoverPause:true  // 내용 위로 마우스 포인터를 올리면 자동 스크롤 일시 멈춤

                });

            });

---

owl-theme 를 사용해 스타일을 적용해보자 (네비게이션 추가됨)

            <div class="owl-carousel owl-theme">

                <div class="item"><img src="./images/puppy-1.jpeg" alt=""></div>

                <div class="item"><img src="./images/puppy-2.jpeg" alt=""></div>

                <div class="item"><img src="./images/puppy-3.jpeg" alt=""></div>

                <div class="item"><img src="./images/kitten-1.jpeg" alt=""></div>

                <div class="item"><img src="./images/kitten-2.jpeg" alt=""></div>

                <div class="item"><img src="./images/kitten-3.jpeg" alt=""></div>

            </div>

---

네비게이션 텍스트 변경

       $('.owl-carousel').owlCarousel({

                    items:3,

                    margin:10,

                    loop:true,

                    autoplay:true,

                    autoplayTimeout:3000,

                    autoplayHoverPause:true,

                    nav:true,

                    navText:['이전','다음']         // 이미지가 하나씩 이동하는 네비게이션이 추가됨. 점 네비는 3개씩 이동.

                });