Owl Carousel does not work

Question

Owl Carousel does not work

Asked 5 years, 7 months ago

Viewed 603 times

2

hello friends would like a help please.

I’m trying to make a Carousel on my site and I’m not getting it at all.
I don’t know if it’s a problem in the link , or in the case files, because the way I picked up the site I insert in the code. I only know that , when you insert html the images are all giant.
and when linking the Carousel css file to the page ,the pictures somen and the screen turns all white here’s how it looks when I insert the html.
what I’m doing wrong ?

$(document).ready(function() {
 
  $("#owl-demo").owlCarousel({
 
      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true
 
      // "singleItem:true" is a shortcut for:
      // items : 1, 
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false
 
  });
 
});

$(document).ready(function() {
 
  $("#owl-example").owlCarousel();
 
});

#owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title>carousel</title>
	<link rel="stylesheet" type="text/css" href="css/estilo.css">
	<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="css/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="css/owl.theme.default.css">
 
<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>
 
<!-- Include js plugin -->
<script src="js/owl.carousel.js"></script>
</head>
<body>
	<h1>oi</h1>
	<div id="owl-example" class="owl-carousel owl-theme">
 
  <div class="item"><img src="img/01.jpg" alt="The Last of us"></div>
  <div class="item"><img src="img/02.jpg"" alt="GTA V"></div>
  <div class="item"><img src="img/03.jpg"" alt="Mirror Edge"></div>
 
</div>
</body>
</html>

1 answer

Browser other questions tagged javascript html css carousel owl-carousel

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-04-29T14:01:28+00:00

Dude had some detail that I changed and here it’s working, first that has quotes " left in your code, after this version of jQuery is very old.

Also, you have only 3 images, which is just the minimum pattern of items per slide, what I mean is that the carousel is active only when it has at least 4 items or more by default in the setting for example by placing items: 2 or items: 1 to display only 1 item per slide. More about settings here https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

See it working after I made the adjustments.

  <!DOCTYPE html>
  <html lang="pt-br">

  <head>
      <title>carousel</title>
      <link rel="stylesheet" type="text/css" href="css/estilo.css">
      <!-- Important Owl stylesheet -->

      <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
      <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

      <style>
          #owl-demo .item img {
              display: block;
              width: 100%;
              height: auto;
          }
      </style>
  </head>

  <body>
      <h1>oi</h1>
      <div id="owl-example" class="owl-carousel owl-theme">
          <div class="item"><img src="https://placecage.com/100/100">1</div>
          <div class="item"><img src="https://placecage.com/100/100">2</div>
          <div class="item"><img src="https://placecage.com/100/100">3</div>
          <div class="item"><img src="https://placecage.com/100/100">4</div>
          <div class="item"><img src="https://placecage.com/100/100">5</div>
          <div class="item"><img src="https://placecage.com/100/100">6</div>
      </div>

      <script>
          $(document).ready(function () {

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

                  navigation: true, // Show next and prev buttons
                  slideSpeed: 300,
                  paginationSpeed: 400,
                  singleItem: true,
                  items: 5
              });
          });
          $(document).ready(function () {
              $("#owl-example").owlCarousel();
          });
      </script>
  </body>

  </html>