( owlCarousel ) 플러그인 달기

비니_ 2021. 6. 11. 12:20

728x90

<html>

<div id="hb" class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

<js>

//owl
jQuery("#hb").owlCarousel({
				loop:true,
				margin:0,
				nav:true,
       			items:1,
        		autoplay:true,
				responsive:{ //반응형에 따른 스타일 옵션
					0:{
						items:1, // 모바일
					},
					600:{
						items:1, // 브라우저 600px 이하
            nav:false,
					},
					1024:{
						items:1, // 브라우저 1024px 이하
					}
				}
			});

옵션 참고

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Options | Owl Carousel | 2.3.4

Options List including all options from built-in plugins video, lazyload, autoheight and animate. items Type: Number Default: 3 The number of items you want to see on the screen. margin Type: Number Default: 0 margin-right(px) on item. loop Type: Boolean D

owlcarousel2.github.io

728x90