SpongeBOB
Well-Known Coder
Hi everyone,
I'm using the Owl carousel in one of my html page (full screen)
I would like that my images are not stretch-out (displayed more than 100%)
How can I do achieve that ?
I'm using the Owl carousel in one of my html page (full screen)
I would like that my images are not stretch-out (displayed more than 100%)
How can I do achieve that ?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel_fullscreen</title>
<link rel="stylesheet" href="static/OwlCarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="static/OwlCarousel/assets/owl.theme.default.min.css">
</head>
<body bgcolor="#1c1c1c" text="#E1E1E1">
<!-- Carousel -->
<div class="owl-carousel owl-theme">
<div><img src="1.gif"></div>
<div><img src="2.gif"></div>
<div><img src="3.gif"></div>
<div><img src="4.gif"></div>
<div><img src="5.gif"></div>
<div><img src="6.gif"></div>
<div><img src="7.gif"></div>
<div><img src="8.gif"></div>
<div><img src="9.gif"></div>
<div><img src="10.gif"></div>
<div><img src="11.gif"></div>
</div>
<section title="carousel scripts">
<script src="static/jquery/jquery-3.6.0.min.js"></script>
<script src="static/OwlCarousel/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 5,
nav: true,
loop:true,
items: 1,
});
});
</script>
</section>
</body>
</html>
