반응형
owlCarousel.js 라는 라이브러리를 통해서 이미지 롤링, 케러셀, 슬라이드를 만드는 방법을 정리해보겠습니다.
우선 사용할 라이브러리는 https://owlcarousel2.github.io/OwlCarousel2/ 입니다.
위와 같은 형태의 이미지 슬라이더를 만들어보려고 합니다.
오직 html,css,js 만 사용해서 만들기 때문에 어디에서든 사용하실 수 있습니다.
HTML
이미지 슬라이더를 만들기 위한 구조는 아래와 같습니다.
<html>
<head>
<link rel="stylesheet" href="./css/owl.carousel.min.css" />
<link rel="stylesheet" href="./css/owl.theme.default.css" />
</head>
<body>
<div class="owl-carousel owl-theme">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<body>
</html>owl-carousel, owl-theme은 캐러셀을 사용하기 위해 라이브러리에서 정의된 클래스입니다.
위 코드처럼 두 스타일 파일을 알맞은 경로에 넣고 link태그를 통해서 로드해야합니다.
준비가 끝났으니 알맞은 아이템들을 넣어줍니다.
<html>
<head>
<link rel="stylesheet" href="./css/owl.carousel.min.css" />
<link rel="stylesheet" href="./css/owl.theme.default.css" />
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="main_banner owl-carousel owl-theme">
<div class="item first">
<h2 class="title">스포츠클럽과 함께 <strong class="em">새로운 여행문화를 제공해 드립니다</strong></h2>
<span class="subtitle">고객들에게 특별한 여행 경험을 제공합니다</span>
</div>
<div class="item second">
<h2 class="title">스포츠클럽은 <strong class="em">Lorem ipsum dolor sit amet.</strong></h2>
<span class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, sit?</span>
</div>
<div class="item third">
<h2 class="title">세번째 배너 <strong class="em">Lorem ipsum dolor sit amet.</strong></h2>
<span class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, sit?</span>
</div>
</div>
</div>
<script src="./lib/jquery-3.4.1.js"></script>
<script src="./lib/owl.carousel.min.js"></script>
<script src="./js/app.js"></script>
<body>
</html>
위처럼 코드를 작성해주면 html코드는 끝났습니다. 그러면 이제 app.js에 자바스크립트 코드를 작성해보겠습니다.
JS
(function(window) {
"use strict";
document.addEventListener("DOMContentLoaded", function() {
$(".owl-carousel").owlCarousel({
loop: true,
responsiveClass: true,
autoplay: true,
autoplayTimeout: 5000,
dots: false,
nav: true,
responsive: {
0: {
items: 1
}
}
});
});
})();
코드를 보면 모든 DOM이 로드되었을 경우 owl-carousel 클래스에 원하는 속성을 넣어서 캐러셀을 동작시킬 수 있습니다.
loop : 마지막 이미지 다음에 첫번째 이미지가 나오게 해줌.
responsiveClass : 반응형 이미지 슬라이더를 사용할 수 있습니다.
autoplay : 자동으로 이미지 슬라이더가 넘어갑니다.
dots : 페이지네이션 점
nav : 좌우 방향키
CSS
제가 만들려고 했던건 좌우 방향키가 있는 이미지 슬라이드 캐러셀 이었습니다. 하지만 owl-carousel 라이브러리에서는 기본적인 못생긴 버튼만 제공해주고 있기 때문에 추가적으로 커스텀을 해줘야합니다.
개발자 도구를 통해 확인해보니 버튼이 owl-next , owl-prev 라는 클래스를 갖고 있는 것을 확인했습니다.
이제 알았으니 수정해보도록 하겠습니다.
.main_banner {
position: relative;
}
.main_banner .owl-prev {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100px;
outline: none;
}
.main_banner .owl-prev::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: -328px -651px;
background-repeat: no-repeat;
width: 22px;
height: 38px;
content: "";
margin: auto;
}
.main_banner .owl-next {
position: absolute;
top: 0;
right: 0;
bottom: 0;
outline: none;
width: 100px;
}
.main_banner .owl-next::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: -1056px -369px;
background-repeat: no-repeat;
width: 22px;
height: 38px;
content: "";
margin: auto;
}
.main_banner .item {
padding-top: 323px;
height: 800px;
box-sizing: border-box;
color: #fff;
text-align: center;
}
.main_banner .item.first {
background: no-repeat url("../img/main_banner.png") 0/cover;
}
.main_banner .item.second {
background: no-repeat url("../img/intro_banner.png") 0/cover;
}
.main_banner .item.third {
background: no-repeat url("../img/bussiness_banner.png") 0/cover;
}
.main_banner .item .title {
display: inline-block;
vertical-align: top;
line-height: 60px;
font-size: 50px;
letter-spacing: -2.5px;
font-weight: normal;
position: relative;
}
.main_banner .item .title .em {
display: block;
}
.main_banner .item .title::before {
position: absolute;
top: 35px;
left: -55px;
font-size: 124px;
font-weight: 100;
content: "[";
}
.main_banner .item .title::after {
position: absolute;
top: 35px;
right: -55px;
font-size: 124px;
font-weight: 100;
content: "]";
}
.main_banner .item .subtitle {
display: inline-block;
vertical-align: top;
display: block;
margin-top: 15px;
font-size: 24px;
line-height: normal;
letter-spacing: -1.2px;
}
@media screen and (max-width: 998px) {
.main_banner {
height: 654px;
}
.main_banner .item {
background: no-repeat url("../img/mb_main_banner.png") 0/cover;
padding-top: 241px;
height: 654px;
}
.main_banner .item .title {
font-size: 35px;
}
.main_banner .item .title::before, .main_banner .item .title::after {
font-size: 92px;
}
}
@media screen and (max-width: 768px) {
.main_banner {
height: 654px;
}
.main_banner .item {
padding-top: 241px;
height: 654px;
}
.main_banner .item .title {
font-size: 30px;
}
.main_banner .item .title::before, .main_banner .item .title::after {
font-size: 92px;
}
.main_banner .item .subtitle {
font-size: 20px;
}
}
@media screen and (max-width: 475px) {
.main_banner {
height: 654px;
}
.main_banner .item {
background: no-repeat url("../img/mb_main_banner.png") 0/cover;
padding-top: 241px;
height: 654px;
}
.main_banner .item .title {
font-size: 24px;
line-height: 40px;
}
.main_banner .item .title::before, .main_banner .item .title::after {
top: 20px;
font-size: 70px;
}
.main_banner .item .title::before {
left: -30px;
}
.main_banner .item .title::after {
right: -30px;
}
.main_banner .item .subtitle {
font-size: 16px;
}
}제 CSS코드는 SCSS 코드를 빌드해서 css코드로 만든 것이라 복잡하긴 하지만 위와 같이 작성해주면 이런 캐러셀을 만들 수 있습니다!
이미지 슬라이더, 캐러셀, 롤링배너는 다양한 라이브러리가 많이 존재하기 때문에 다양한 것을 사용해보는 것이 중요한 것 같습니다.
'웹 개발 > UI' 카테고리의 다른 글
| css Flex IE 이슈 정리 (0) | 2021.01.12 |
|---|---|
| 퍼블리셔가 알면 유용한 웹 사이트 (feat. 크롬 확장프로그램) (0) | 2020.06.20 |
| HTML, CSS로 사이드바 만들기 (0) | 2020.06.06 |
| Flexbox로 반응형 레이아웃 만들기 (0) | 2020.06.06 |
| CSS를 이용한 말줄임 처리 방법 (0) | 2020.06.02 |
댓글