owl carousel does not work [closed]
want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 months ago .
improve this questionHello friends would like a help please.
I'm trying to make a carousel on my site and not getting it at all.
I don't know if it's a problem with the link , or in the classes, because the way I took the site I insert in the code. I just know that by inserting html the images are all giant.
and by linking the CSS file of the carousel on the page, the images somen and the screen becomes all white
here's how ta getting when I insert html.
what am I 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 answers
Guy had some detail that I changed and here it is working, first that has a few quotes " left in the code sue, after that version of jQuery is very old.
In addition, vc has only 3 images, which is precisely the minimum standard of items per slide, what I mean is that the carousel only activates when it has at least 4 items or more by default in the configuration for example placing items: 2 or items: 1 to display only 1 item per slide. Law more about settings here https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
See 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>