FrontEnd/HTML
[HTML] 캐로셀 적용하기
2022. 2. 5. 22:53반응형
1. 다운로드
- owlcarousel2.github.io/OwlCarousel2에서 압축 파일을 다운로드
- dist\assets폴더 내부의 모든 css파일을, index.html파일과 같이 있는 css폴더 아래에 위치시킵니다.
- src\js폴더의 내부 모든 js파일을, index.html파일과 같이 있는 js폴더 아래에 위치시킵니다.
- jquery파일을 다운로드 하여, index.html파일과 같이 있는 js폴더 아래에 위치시킵니다.
https://code.jquery.com/jquery-3.5.1.min.js -> 크롬 "도구 더보기" -> "페이지를 다른이름으로 저장"
2. 아래의 코드 실행.
( 현재 2개의 사진으로만 되어있음)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Owl Carousel</title>
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/owl.theme.default.css" />
</head>
<body>
<div id="wrapper">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="images/puppy-1.jpg">
</div>
<div class="item">
<img src="images/puppy-2.jpg">
</div>
<div class="item">
<img src="images/puppy-3.jpg">
</div>
<div class="item">
<img src="images/kitten-1.jpg">
</div>
<div class="item">
<img src="images/kitten-2.jpg">
</div>
<div class="item">
<img src="images/kitten-3.jpg">
</div>
</div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/owl.autoplay.js"></script>
<script src="js/owl.navigation.js"></script>
<script>
$(function () {
$('.owl-carousel').owlCarousel({
items: 2,
margin: 10,
loop: true,
nav: true,
navText: ['이전', '다음'],
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true
});
});
</script>
</body>
</html>코드설명
items: 2 => 2개의 사진만 보여주겠다는 의미
autoplayTimeout: 3000 => 3초마다 넘김, 2장의 사진을 넘김.
결과화면
출처/참고자료
반응형
'FrontEnd > HTML' 카테고리의 다른 글
| HTML 엘리먼트 (element)의 속성값들 (0) | 2022.03.05 |
|---|---|
| [HTML] img와 div 태그에 대한 고찰 (사이즈 범위 벗어나거나/꽉차거나) (0) | 2022.02.07 |
| [HTML] 기본 HTML 형식 및 구조 (틀) (DOCTYPE html) (0) | 2022.02.05 |
| [타임리프] (0) | 2021.12.06 |
| [HTML] 실무에서 많이 쓰는 html 태그들 (0) | 2021.12.01 |