Owl Carousel은 어떻게 설치합니까?

Question

연습 사이트를 만들고 있는데 이미지 회전식을 한 번도 만들어 본 적이 없기 때문에 내 운을 시험해보기로했습니다. 인터넷 검색을 한 후 나는 컨베이어를 만들기에 매우 유용한 도구 인 Owl Carousel을 발견했다. 그러나 설치 지침은 설치 지침을 이해할 수 없습니다.

는 여기에 지금까지 수행 한 작업은 다음과 같습니다

1. 나는 올빼미 회전 목마를 다운로드하고 내 루트 디렉토리에 '자산'과 '올빼미 회전 목마'폴더를 이동했다. 그래서 같은

   <meta charset="utf-8"> 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
   <link rel="stylesheet" type="text/css" href="style.css"> 
   <link rel="stylesheet" type="text/css" href="flexbox.css"> 
   <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> 
   <link rel="stylesheet" href="owl-carousel/owl.theme.css"> 
   <script src="assets/owl-carousel/owl.carousel.js"></script> 
   

2. 내가 설정 내 HTML :

   #owl-demo .item img{ 
   display: block; 
   width: 100%; 
   height: auto; 
   } 
   

:

<div id="owl-example" class="owl-carousel"> 
    <div class="img1"> Your Content </div> 
    <div class="img2"> Your Content </div> 
    <div class="img3"> Your Content </div> 
</div> 

3. 내가 내 CSS이 추가

4. 나는 내 머리 태그에이 모든 것을 포함

5. 마지막으로이 스크립트를 활성화했습니다.

   <script> 
       $(document).ready(function() { 
   
       $("#owl-demo").owlCarousel({ 
   
        navigation : true, // Show next and prev buttons 
        slideSpeed : 300, 
        paginationSpeed : 400, 
        singleItem:true 
   
        // "singleItem:true" is a shortcut for: 
        // items : 1, 
        // itemsDesktop : false, 
        // itemsDesktopSmall : false, 
        // itemsTablet: false, 
        // itemsMobile : false 
       }); 
       </script> 
   

나는이 결과를 달성하기 위해 노력하고 있어요 :

여기

http://owlgraphic.com/owlcarousel/demos/one.html

이 Jfiddle 내 모든 코드입니다.

http://jsfiddle.net/pd19q8vc/

이 내 웹 사이트의 모양을 전혀 아니지만, 난 그냥 코드의 전체 양이 필요한 경우에 사용할 수 싶었다.

그래서 내가 뭘 잘못하고 있니? 이 회전식 컨베이어를 어떻게 작동시킬 수 있습니까?

Answer 1

<script> 
    $(document).ready(function() { 

    $("#owl-demo").owlCarousel({ 

     navigation : true, // Show next and prev buttons 
     slideSpeed : 300, 
     paginationSpeed : 400, 
     singleItem:true 

     // "singleItem:true" is a shortcut for: 
     // items : 1, 
     // itemsDesktop : false, 
     // itemsDesktopSmall : false, 
     // itemsTablet: false, 
     // itemsMobile : false 
    }); 
}); 
</script> 

pleas add}); 스크립트 태그가 닫히기 전에