I am making an carousel by using owl Carousel. but it doesn't shows anything this is my html code:
@{
Layout= null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="~/css/bootstrap.css">
<link href="~/css/owl.carousel.css" rel="stylesheet" />
</head>
<body>
<div >
<div >
<div >Content 1</div>
<div >Content 2</div>
<div >Content 3</div>
<div >Content 4</div>
<div >Content 5</div>
<div >Content 6</div>
<div >Content 7</div>
<div >Content 8</div>
</div>
</div>
<script src="~/js/jquery-1.11.1.min.js"></script>
<script src="~/js/owl.carousel.js"></script>
<script src="~/js/bootstrap.js"></script>
<script>
$(document).ready(function () {
$("owl-carousel").owlCarousel();
})
</script>
</body>
</html>
but it shows my nothing and the page is completely blank why doesn't it show anything?
CodePudding user response：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g=="
crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo nk7go3BtSuK9kfa/s a4f4i5pLkw=="
crossorigin="anonymous" />
</head>
<body>
<div >
<div >
<h4>Content 1</h4>
</div>
<div >
<h4>Content 2</h4>
</div>
<div >
<h4>Content 3</h4>
</div>
<div >
<h4>Content 4</h4>
</div>
<div >
<h4>Content 5</h4>
</div>
<div >
<h4>Content 6</h4>
</div>
<div >
<h4>Content 7</h4>
</div>
<div >
<h4>Content 8</h4>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<!-- Owl Carousel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- custom JS code after importing jquery and owl -->
<script type="text/javascript">
$(document).ready(function () {
$(".owl-carousel").owlCarousel();
});
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
</script>
</body>
</html>