Почему Owl Carousel не подключается?

$(document).ready(function() { 
 
  $('.owl-carousel').owlCarousel({ 
    loop: true, 
    margin: 10, 
    nav: true, 
    responsive: { 
      0: { 
        items: 1 
      }, 
      600: { 
        items: 3 
      }, 
      1000: { 
        items: 5 
      } 
    } 
  }) 
   
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script> 
 
<div class="owl-carousel"> 
  <div class="item"><h4>1</h4></div> 
  <div class="item"><h4>2</h4></div> 
  <div class="item"><h4>3</h4></div> 
  <div class="item"><h4>4</h4></div> 
  <div class="item"><h4>5</h4></div> 
  <div class="item"><h4>6</h4></div> 
  <div class="item"><h4>7</h4></div> 
  <div class="item"><h4>8</h4></div> 
  <div class="item"><h4>9</h4></div> 
  <div class="item"><h4>10</h4></div> 
  <div class="item"><h4>11</h4></div> 
  <div class="item"><h4>12</h4></div> 
</div>