title: Jquery OWL Carousel just doesn't seem to work, divs are put beneath each other
body: <p>I'm building a website for a school project, but my Owl Carousel slider doesn't work. Could someone please help me, because I don't understand why it doesn't work. I've tried reading the documentation, but it doesn't help me.</p>
  
  <p>I want create an instance of Owl Carousel, but although I followed the instructions, the different divs are just placed beneath each other. I know this is perhaps a bit vague, but i'm not sure how to put this.</p>
  
  <p>Thank you!</p>
  
  <pre><code>&lt;link href="css/bootstrap.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="css/layout.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="owl-carousel/owl.carousel.css" type="text/css"&gt;
  &lt;link href="owl-carousel/owl.theme.css" type="text/css"&gt;
  &lt;link href="owl-carousel/owl.transitions.css" type="text/css"&gt;
  
  &lt;div class="col-md-8 col-md-offset-1"&gt;
      &lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
          &lt;div class="item"&gt;
              &lt;p class="broodtekst"&gt;Hét event van de bedrijfsfilm in Vlaanderen gaat in deze &lt;strong&gt;16e editie&lt;/strong&gt; over de taalgrens heen. &lt;br /&gt; Dit jaar organiseren we het  festival in Brussel en dingen naast Vlaamse nu ook Brusselse en Waalse bedrijven mee naar de prestigieuze video awards. &lt;br /&gt;
              Het festival zal ingeleid worden met een beurs en allerlei gastsprekers.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;p class="broodtekst"&gt;L’evenement du film d’enterprise en flandre changera d’un evenement regional à un evenement national. Depuis cette année on organisera le festival à Kinepolis Bruxelles et l’ont aussi des entreprises bruxellois et wallon l’opportunité de concourir pour ces prix prestigieuses.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="img/groepsfoto.png" alt="The Last of Us" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;    
  &lt;script src="owl-carousel/owl.carousel.js"&gt;&lt;/script&gt;     
  &lt;script&gt;
      $(document).ready(function() {
        $("#owl-demo").owlCarousel({
  
          navigation : true,
          slideSpeed : 300,
          paginationSpeed : 400,
          singleItem : true
  
          // "singleItem:true" is a shortcut for:
          // items : 1, 
          // itemsDesktop : false,
          // itemsDesktopSmall : false,
          // itemsTablet: false,
          // itemsMobile : false
  
        });
      });
  &lt;/script&gt;   `
  
  &lt;!-- Hier komt de JQuery --&gt;
  
  &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I've placed it on <a href="http://jsfiddle.net/qk05r1g2/" rel="nofollow noreferrer">JsFiddle</a>, but it doesn't seem to work there either.</p>
  
  <p>You can also visit the site on: <a href="http://cvf.kiran.be" rel="nofollow noreferrer">http://cvf.kiran.be</a></p>