Why does not my Owl Carousel work? What am I installing wrong?

Navigation
0

I'm setting up my owl carousel "custom" and I can not get it to work on my computer. I did everything as documentation does, but it does not work at all. The only thing that appears is the words of the next and prev, without any formatting, as if it were only with html. I think I'm calling the files and puglins correctly, I checked numerous times. Where is my error? 

#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;
}
//use styles below to disable ugly selection
.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);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <link rel="stylesheet" href="css/estilo.css">
  <!-- Important Owl stylesheet -->
  <link rel="stylesheet" href="css/owl.carousel.css">
  <!-- Default Theme -->
  <link rel="stylesheet" href="css/owl.theme.css">
  <!--  jQuery 1.7+  -->
  <script src="js/jquery-1.9.1.min.js"></script>
  <!-- Include js plugin -->
  <script src="js/owl.carousel.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script>$(document).ready(function(){varowl=$("#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');
      })

    });
  </script>

</head>

<body>
  <div id="owl-demo" class="owl-carousel owl-theme">
    <div class="item">
      <h1>1</h1>
    </div>
    <div class="item">
      <h1>2</h1>
    </div>
    <div class="item">
      <h1>3</h1>
    </div>
    <div class="item">
      <h1>4</h1>
    </div>
    <div class="item">
      <h1>5</h1>
    </div>
    <div class="item">
      <h1>6</h1>
    </div>
    <div class="item">
      <h1>7</h1>
    </div>
    <div class="item">
      <h1>8</h1>
    </div>
    <div class="item">
      <h1>9</h1>
    </div>
    <div class="item">
      <h1>10</h1>
    </div>
    <div class="item">
      <h1>11</h1>
    </div>
    <div class="item">
      <h1>12</h1>
    </div>
    <div class="item">
      <h1>13</h1>
    </div>
    <div class="item">
      <h1>14</h1>
    </div>
    <div class="item">
      <h1>15</h1>
    </div>
    <div class="item">
      <h1>16</h1>
    </div>
  </div>

  <div class="customNavigation">
    <a class="btn prev">Previous</a>
    <a class="btn next">Next</a>
    <a class="btn play">Autoplay</a>
    <a class="btn stop">Stop</a>
  </div>

</body>

</html>
    
asked by anonymous 12.02.2016 / 12:51

1 answer

1

Simple, you had 2 jQuery files and inverted dependencies order, the functional solution follows: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <link rel="stylesheet" href="css/estilo.css">
  <!-- Important Owl stylesheet -->
  <link rel="stylesheet" href="css/owl.carousel.css">
  <!-- Default Theme -->
  <link rel="stylesheet" href="css/owl.theme.css">
  <!--  jQuery 1.7+  -->
  <script src="js/jquery-1.9.1.min.js"></script>
  <!-- Include js plugin -->
  <script src="js/owl.carousel.js"></script>

Or so: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <link rel="stylesheet" href="css/estilo.css">
  <!-- Important Owl stylesheet -->
  <link rel="stylesheet" href="css/owl.carousel.css">
  <!-- Default Theme -->
  <link rel="stylesheet" href="css/owl.theme.css">
  <!--  jQuery 1.7+  -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><!--Includejsplugin--><scriptsrc="js/owl.carousel.js"></script>

See an example working: 

$(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');
  })

});
#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);
  display: inline-block; padding: 3px 5px; background: #333; color: #fff;
}
 <!-- Important Owl stylesheet -->
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<!--  jQuery 1.7+  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><!--Includejsplugin--><scriptsrc="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>

<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="item">
    <h1>1</h1>
  </div>
  <div class="item">
    <h1>2</h1 >
    </div>
    <div class="item">
      <h1>3</h1 >
    </div>
    <div class="item">
      <h1>4</h1 >
    </div>
    <div class="item">
      <h1>5</h1 >
    </div>
    <div class="item">
      <h1>6</h1 >
    </div>
    <div class="item">
      <h1>7</h1 >
    </div>
    <div class="item">
      <h1>8</h1 >
    </div>
    <div class="item">
      <h1>9</h1 >
    </div>
    <div class="item">
      <h1>10</h1 >
    </div>
    <div class="item">
      <h1>11</h1 >
    </div>
    <div class="item">
      <h1>12</h1 >
    </div>
    <div class="item">
      <h1>13</h1 >
    </div>
    <div class="item">
      <h1>14</h1 >
    </div>
    <div class="item">
      <h1>15</h1 >
    </div>
    <div class="item">
      <h1>16</h1 >
    </div>
</div>

<div class="customNavigation">
   <a class="btn prev">Previous</a>
   <a class="btn next">Next</a >
   <a class="btn play">Autoplay</a>
</div>
    
12.02.2016 / 18:39
How to create a cookie for popup ads to open 1 time only 24 hours Retrieve WSDL from WebService NFe ASMX