owl.carousel 플러그인 적용하기
2019. 2. 7. 15:59ㆍ카테고리 없음
1. css를 head 에 불러온다.
<link rel="stylesheet" href="owlcarousel/owl.carousel.css">
2. js 를 제이쿼리파일 다음에 넣는다.
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
3. html 사용한다.
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
4. 호출한다.
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
5. 그 외 디자인 디테일을 손본다.
/*올빼미캐러셀 네비*/
.owl-nav, .owl-dots {display: block; text-align: center;}
.owl-nav .owl-prev, .owl-nav .owl-next{ display:inline-block; margin:5px;}
.owl-dots .owl-dot {display: inline-block; background-color: #ccc;width: 12px; height: 12px;
border-radius: 50%; margin:5px ; }
.owl-dots .active {background-color:#666;}
호출할때 기타 옵션을 이래저래 세팅한다.
반응형으로 브라우저별 갯수세팅과, 무한반복, 자동플레이, 네비게이션 사용 등을 설정한다.
//올빼미캐러셀
$(".owl-carousel").owlCarousel({
nav:true,
loop: true,
dots: true,
autoplay:true,
rewind: true,
autoplayTimeout: 2000,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:2,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:6,
nav:true,
loop:false
}
}
});
출처 : https://blog.naver.com/mootory/221116473437
파일 다운로드