0

我在我的代码中添加了Owl-Carousel，我编写了横幅类型轮播的代码，但图像显示一个在另一个下方。

这是我的 HTML 代码：

<!--Owl Carousel-->
<link rel="stylesheet" href="assets/owl-carousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="assets/owl-carousel/owl-carousel/owl.theme.css">

<!--Owl-Carousel -->
    <section id="banner-area">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <img src="../assets/Banner1.jpg" alt="Banner1">
            </div>
            <div class="item">
                <img src="../assets/Banner2.jpg" alt="Banner2">
            </div>
            <div class="item">
                <img src="../assets/Banner3.jpg" alt="Banner3">
            </div>
        </div>
    </section>

    <!--!Owl-Carousel -->

<!--Owl Carousel Js -->

<script src="plugins/owl-carousel/owl.carousel.min.js"></script>


<!--Custom Javascript -->
<script src="index.js"></script>

这是我的 Javascript 代码：

$(document).ready(function(){

   // banner owl carousel
   $("#banner-area .owl-carousel").owlCarousel({
     dots: true,
     items: 1
   });
});

请帮助我，让我知道我在哪里做错了。

4

1 回答 1

0 

$(document).ready(function(){

// banner owl carousel
$("#banner-area .owl-carousel").owlCarousel({
    dots: true,
    items: 1,
    loop: true,
    autoplay: true
  });
});
.item {
  background-color: red;
  color: white;
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</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.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<section id="banner-area">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <h2>Swipe 1</h2>
            </div>
            <div class="item">
                <h2>Swipe 2</h2>
            </div>
            <div class="item">
                <h2>Swipe 3</h2>
            </div>
        </div>
    </section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
</body>
</html>

我已经尝试过，它在这里对我有用，你可以查看演示

于 2020-12-15T06:39:49.060 回答