Owl Carousel 플러그인은 터치 지원, 자동 스크롤, 속도 조절, 오른쪽에서 왼쪽으로 스크롤 등 여러가지 기능을 갖추고 있으며, 플러그인 사용을 위한 문서가 잘 정리되어 있어서 처음 사용하는 사람도 쉽게 배울 수 있다.
앞에서 살펴본 BxSlider 플러그인에서는 한번에 하나의 이미지만 표시했지만, Owl Carousel 플러그인을 사용해서 한 화면에 여러개의 이미지를 표시하고 스크롤하는 방법에 대해 알아보자
플러그인을 실행하려면 Owl Carousel 의 공식 사이트에서 파일을 다운로드 받고 dist/assets 폴더에 있는 css 파일과 src/js 폴더에 있는 js 파일을 원하는 폴더에 옮겨놓아야 한다.
Owl Carousel을 사용해 캐러셀 만들기
- 플러그인을 사용하기 위해 스타일 시트 파일을 연결하자
<title>Owl Carousel</title>
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.default.css">
- 플러그인 실행에 필요한 스크립트 파일도 연결해야 한다. 복사한 js 파일 중에서 기본으로 사용할 것은 owl.carousel.js 파일이다. 자동 스크롤이 되게 하려면 owl.autoplay.js , 네비게이션을 표시하려면 owl.navigation.js 를 함께 연결하자 다음코드는 </body> 앞에 추가해야 한다
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/owl.autoplay.js"></script>
<script src="js/owl.navigation.js"></script>
- 플러그인 동작 방법을 익혀보기 위해 현재 문서에 6개 이미지를 넣고 스크롤해보자 캐러셀이 들어갈 부분은 class=”owl-carousel” 인 <div>태그로 묶어준 후 스크롤할 슬라이드는 class=”item” 으로 지정한다 다음 코드를 캐러셀이 들어갈 위치에 삽입한다
<body>
<div id="wrapper">
<div>
<div class="item">
<img src="images/puppy-1.jpeg">
</div>
<div class="item">
<img src="images/puppy-2.jpeg">
</div>
<div class="item">
<img src="images/puppy-3.jpeg">
</div>
<div class="item">
<img src="images/kitten-1.jpeg">
</div>
<div class="item">
<img src="images/kitten-2.jpeg">
</div>
<div class="item">
<img src="images/kitten-3.jpeg">
</div>
</div>
</div>
- 플러그인을 실행하는 기본 소스는 다음과 같다 스크롤할 대상에 owlCarousel() 메서드만 지정해주면 된다 </body> 앞에 이 소스를 추가하자
<script>
$(function(){
$('.owl-carousel').owlCarousel({
});
});
</script>
- 화면에 이미지를 3개씩 표시하고 반복 스크롤할 수 있도록 옵션을 추가해 보자 owlCarousel() 메서드에서 사용할 옵션은 괄호 안에 {} 를 넣고 그 사이에 지정하면 된다.
<script>
$(function(){
$('.owl-carousel').owlCarousel({
items:3, 화면에 표시할 항목 개수
margin:10, 항목과 항목 사이의 간격
loop:true, 무한 반복
autoplay:true, 자동 스크롤 실행
autoplayTimeout:3000, 자동 스크롤 시간 간격
autoplayHoverPause:true 내용 위로 마우스 포인터를 올리면 일시 멈춤
});
});
</script>
- owl-carousel 스타일을 사용한 <div> 태그에 .owl-theme 스타일을 추가한다
<body>
<div id="wrapper">
<div class="owl-carousel owl-theme">
- 네비게이션 옵션 추가
<script>
$(function(){
$('.owl-carousel').owlCarousel({
items:3,
margin:10,
loop:true,
nav:true,
navText:['이전','다음'],
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true
});
});
</script>
'프론트 개발' 카테고리의 다른 글
| [ FE ] Do it! 프런트엔드 웹디자인 입문 12-1 SVG 이미지란? (0) | 2026.02.27 |
|---|---|
| [ FE ] Do it! 프런트엔드 웹디자인 입문 11-4 그 밖의 캐러셀 플러그인 (0) | 2026.02.27 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 11-2 캡션, 비디오, 반응형 등 다양한 옵션 설정이 가능한 bxSlider 플러그인 (0) | 2026.02.26 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 11-1 캐러셀이란? (0) | 2026.02.25 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 10-2 풀 스크린 배경 동영상 직접 만들기 (0) | 2026.02.25 |