El carrusel de búhos no funciona, ¿tal vez vinculé algo incorrectamente?

Solución:

El problema es que debe especificar “elemento” como 1 para trabajar en respuesta,

Aquí está el código de trabajo

$(".owl-carousel").owlCarousel({
      autoPlay: 3000,
      items : 1, // THIS IS IMPORTANT
      responsive : {
            480 : { items : 1  }, // from zero to 480 screen width 4 items
            768 : { items : 2  }, // from 480 screen widthto 768 6 items
            1024 : { items : 3   // from 768 screen width to 1024 8 items
            }
        },
  });

De acuerdo, he arreglado el fragmento.

Cosas que arreglé:

• Se agregó el script jquery
• Se agregó el script owlcarousel y css. después jquery
• Cerró los corchetes JS correctamente.

Sugerencia:

Utilice la consola del navegador. f12 debería abrirlo y luego es fácil encontrar el error.

Su código rara vez “simplemente funcionará”, necesita saber cómo depurarlo (lo cual es realmente fácil en el desarrollo web)

$(document).ready(function() {

  $("#owl-demo").owlCarousel({

    autoPlay: 3000, //Set AutoPlay to 3 seconds

    items: 4,
    itemsDesktop: [1199, 3],
    itemsDesktopSmall: [979, 3]

  });
}); // Notice there need to be two sets of closing brackets! One for the .ready and one for the carousel.

.grayscale {
  border: 0px solid black;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  /* For Webkit browsers */
  filter: gray;
  /* For IE 6 - 9 */
  -webkit-transition: all .6s ease;
  /* Transition for Webkit browsers */
}
.grayscale:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: none;
}
#owl-demo .owl-item {
  margin: 3px;
}
#owl-demo .owl-item img {
  display: block;
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.js"></script>

<div id="owl-demo">


  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>

</div>

<script>
</script>

Si desea utilizar una copia local de jquery, reemplace

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

con

<script src="https://foroayuda.es/pathtolocalcopy/jquery.min.js""></script>

Además, si planea restringir el número de elementos según los tamaños de pantalla receptivos, puede usar

        responsive : {
            480 : { items : 4  }, // from zero to 480 screen width 4 items
            768 : { items : 6  }, // from 480 screen widthto 768 6 items
            1024 : { items : 8   // from 768 screen width to 1024 8 items
            }
        },

---

---

Utiliza Nuestro Buscador