'any shows slider by owl Carousel

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 class="container">
    <div class="owl-carousel">
        <div class="bg-info">Content 1</div>
        <div class="bg-danger">Content 2</div>
        <div class="bg-dark">Content 3</div>
        <div class="bg-warning">Content 4</div>
        <div class="bg-white">Content 5</div>
        <div class="bg-success">Content 6</div>
        <div class="bg-secondary">Content 7</div>
        <div class="bg-dark">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?

htmlcssbootstrap-4owl-carouselowl-carousel-2


Solution 1:[1]

Errors inside the initialization script and any options added. Must be in that way:

<script>
  $(document).ready(function () {
    $('.owl-carousel').owlCarousel({
      loop:true,
      margin:10,
      nav:true,
      responsive:{
        0 {items:1},
        600:{items:3},
        1000:{items:5}
      }
     });
   });
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Aleksandr Abramov

Related Questions