title: Uncaught Type Error - Cannot read property 'owlcarousel' of null
body: <p>This question has been asked before but after following the advice given I still have the same problem.
  <a href="https://stackoverflow.com/questions/24129993/uncaught-typeerror-cannot-read-property-owlcarousel-of-null">Uncaught typeError: Cannot read property &#39;owlCarousel&#39; of null</a></p>
  
  <p>I have a Magento store using a template called Ultimo. I want to duplicate the brands slider on the homepage to show credentials. The slider uses Lazy Owl and I've pasted the CSS, jQuery and html into my CMS Homepage only no matter what I do i.e. using jQuery instead of $ or adding noConflict the problem persists.</p>
  
  <p>Website is <a href="http://www.lifestylemedicine.co.uk" rel="nofollow noreferrer">www.lifestylemedicine.co.uk</a></p>
  
  <p>The code is:</p>
  
  <pre><code>&lt;style&gt;
  #owl-demo .item{
  background: #3fbf79;
  padding: 30px 0px;
  margin: 10px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  }
  .customNavigation{
  text-align: center;
  }
  
  .customNavigation a{
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  &lt;/style&gt;
  &lt;script&gt;
  $(document).ready(function() {
  
  var owl = $("#owl-demo");
  
  owl.owlCarousel({
    items : 10, //10 items above 1000px browser width
    itemsDesktop : [1000,5], //5 items between 1000px and 901px
    itemsDesktopSmall : [900,3], // betweem 900px and 601px
    itemsTablet: [600,2], //2 items between 600 and 0
    itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
  });
  
  // Custom Navigation Events
  $(".next").click(function(){
  owl.trigger('owl.next');
  })
  $(".prev").click(function(){
  owl.trigger('owl.prev');
  })
  $(".play").click(function(){
  owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as     second parameter
  })
  $(".stop").click(function(){
  owl.trigger('owl.stop');
  })
  
  });
  &lt;/script&gt;
  &lt;h3 class="section-title padding-right"&gt;OUR CREDENTIALS&lt;/h3&gt;
  &lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
  &lt;div class="item"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="customNavigation"&gt;
  &lt;a class="btn prev"&gt;Previous&lt;/a&gt;
  &lt;a class="btn next"&gt;Next&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd be grateful for some help.</p>