JavaScript
[JavaScript] Owl Carousel을 활용한 캐러셀 구현하기
teamnova
2023. 7. 29. 12:00
728x90
안녕하세요. 이번 시간에는 Owl Carousel이라는 플러그인을 사용하여 캐러셀을 간단하게 구현하려 합니다.
우선 Owl Carousel을 설치해야 합니다. html의 head 태그에 다음과 같은 코드를 넣어주세요.
<!-- Owl Carousel을 위한 CSS CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<!-- jquery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Owl Carousel의 javascript CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
아래는 전체 예제 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Owl Carousel을 위한 CSS CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<!-- jquery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Owl Carousel의 javascript CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<style> // 캐러셀의 크기 지정
.owl-carousel {
width: 400px;
height: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 캐러셀 및 이미지 -->
<div class="owl-carousel owl-theme">
<!-- 이미지의 위치에 맞게 src 경로 설정. 여기서는 index.html과 image1,2,3이 같은 폴더 내에 같은 위계에 위치 -->
<div class="item"><img src="./image1.jpg" alt="Image 1"></div>
<div class="item"><img src="./image2.jpg" alt="Image 2"></div>
<div class="item"><img src="./image3.jpg" alt="Image 3"></div>
</div>
<script>
$(document).ready(function(){
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 1, // 한번에 보여지는 이미지 수
loop: true, // 항목들을 무한으로 반복하여 보여줄지 여부
autoplay: true, // 자동으로 슬라이드 쇼를 시작할지 여부
autoplayTimeout: 3000, // 다음 이미지로 넘어가는 시간 (단위 : 밀리초)
autoplayHoverPause: true, // 마우스가 이미지에 위에 있을 때 자동 슬라이드를 일시중지 할지 여부
});
});
</script>
</body>
</html>
결과 영상입니다.
Owl Carousel에 대한 좀 더 자세한 내용은 하단 링크의 공식 홈페이지를 참고해 주세요.