Title1

Title2

Title3

11. 第十一週 OWL.CAROUSEL.JS (下)

  1. 選項:http://www.owlcarousel.owlgraphic.com/docs/api-options.html
    <script type="text/javascript">
    	  $(document).ready(function(){
    		$('.owl-carousel').owlCarousel({
    			loop:true,//循環
    			margin:10,//邊距
    			nav:true,//導航
    			dots:false,//導航點
    			responsive:{
    				0:{
    					items:1//數量
    				},
    				600:{
    					items:2
    				},
    				1000:{
    					items:3
    				}
    			}
    		})
    	  });
    
    	</script>

     

  2. css
    
      <style>
        .owl-carousel {
          position: relative;
        }
        .owl-prev,
        .owl-next {
          position: absolute;
          top: 50%;
        }
    
        .owl-theme .owl-controls .owl-nav [class*=owl-] {
           margin-top: -20px; // 按鈕高度的一半
        }
        .owl-prev {
          left: -50px;
        }
        .owl-next {
          right: -50px;
        }
    
      </style>

     
  3.