貓頭鷹旋轉木馬的任何節目滑塊-有解無憂

我正在使用 owl Carousel 制作旋轉木馬。但它沒有顯示任何內容這是我的 html 代碼：

@{
  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>

但它顯示我什么都沒有，頁面完全是空白的，為什么它什么都不顯示？

uj5u.com熱心網友回復：

<!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 class="owl-carousel owl-theme">
    <div class="item">
        <h4>Content 1</h4>
    </div>
    <div class="item">
        <h4>Content 2</h4>
    </div>
    <div class="item">
        <h4>Content 3</h4>
    </div>
    <div class="item">
        <h4>Content 4</h4>
    </div>
    <div class="item">
        <h4>Content 5</h4>
    </div>
    <div class="item">
        <h4>Content 6</h4>
    </div>
    <div class="item">
        <h4>Content 7</h4>
    </div>
    <div class="item">
        <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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/438226.html

標籤：html css 引导程序 4 猫头鹰旋转木马猫头鹰旋转木马 2

上一篇：如何使導航欄全寬？[復制]

下一篇：在Javascript中更新HTML元素