1

Estou configurando meu owl carousel "custom" e nao consigo coloca-lo para funcionar no meu computador. Fiz tudo como a documentação manda, mas de forma alguma ele funciona. A unica coisa que aparece é a palavras do next e prev, sem formatação nenhuma, como se estive apenas com html. Penso que estou a chamar os arquivos e puglins corretamente, conferi inumeras vezes. Onde esta meu erro?

#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() {

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

    });
  </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>

2
  • Por que está incluindo o jQuery duas vezes? Coloque o jQuery antes de incluir o script do owl-carousel. Commented 12/02/2016 às 15:26
  • Você esta incluindo como os plugins? É wordpress? Parece que não foi inserido manualmente.
    – Syzoth
    Commented 12/02/2016 às 19:21

1 Resposta 1

2

Simples, você estava com 2 arquivos da jQuery e ordem das dependências invertidas, segue a solução funcional:

<!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>

Ou assim:

<!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>
  <!-- Include js plugin -->
  <script src="js/owl.carousel.js"></script>

Veja um exemplo funcionando:

$(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>
<!-- Include js plugin -->
<script src="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>

2
  • Felipe permite-me editar a sua resposta, o autor da pergunta é bastante leigo, infelizmente tem que dar algo mais mastigado.
    – Syzoth
    Commented 12/02/2016 às 19:19
  • @GuilhermeNascimento Grato! Commented 12/02/2016 às 19:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .