Bootstrap 和 owl carousel 冲突

问题描述

我正在使用 owl carousel 2，但是当我将引导程序链接添加到我的网站时似乎存在问题。我觉得这就是问题所在，但不确定。有什么帮助/建议吗？

当我将其添加到我的网站时会发生这种情况：我只看到轮播的下一个和上一个指针。

This is what my website looks like with it. Check the third section.

HTML

<!DOCTYPE HTML>
<html lang="en">

<head>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    
    
    <link rel="stylesheet" href="OwlCarousel2-2.3.4\dist\assets\owl.carousel.css">
    <link rel="stylesheet" href="OwlCarousel2-2.3.4\dist\assets\owl.carousel.min.css">
    <link rel="stylesheet" href="OwlCarousel2-2.3.4\dist\assets\owl.theme.default.min.css">
    <link rel="stylesheet" href="/css/waste.css">

</head>

<body>


    <section class="carousel-section">
        <div class="carousel-container">
          <h2>Stage Padding OwlCarousel2</h2>
          <div class="owl-carousel owl-theme">
            <div class="carousel-item">
              <div class="carousel-item__card">1</div>
        
            </div>
            <div class="carousel-item">
              <div class="carousel-item__card">2</div>
            </div>
            <div class="carousel-item">
              <div class="carousel-item__card">3</div>
            </div>
            <div class="carousel-item">
              <div class="carousel-item__card">4</div>
            </div>
            <div class="carousel-item">
              <div class="carousel-item__card">5</div>
            </div>
            <div class="carousel-item">
              <div class="carousel-item__card">6</div>
            </div>
            <div class="carousel-item">
              <div class="carousel-item__card">7</div>
            </div>
          </div>
        </div>
      </section>


    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
    
    <script src="jquery.min.js"></script>
    <script src="OwlCarousel2-2.3.4\dist\owl.carousel.min.js"></script>
    <script src="OwlCarousel2-2.3.4\dist\owl.carousel.js"></script>

</body>

</html>

JAVASCRIPT


        jQuery(document).ready(function($){
  let slider = $('.owl-carousel');
  slider.each(function () {
    $(this).owlCarousel({
      nav: true,loop:false,autoplaySpeed:1000,autoplay:true,dots: false,pagination: false,margin: 25,autoHeight: false,stagePadding: 50,responsive:{
        0:{
          items: 1,stagePadding: 0,margin: 30,},767:{
          items: 3,stagePadding: 25,1000:{
          items: 3,}
      }
    });
  });
});

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
* {
  Box-sizing: border-Box;
  margin: 0;
  padding: 0;
  font-family: "Poppins",sans-serif;
}
.carousel-section {
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
}
.carousel-section .owl-carousel .owl-stage {
  padding-left: 0 !important;
}
.carousel-section .owl-carousel .owl-stage-outer {
  overflow: unset;
}
.carousel-section .owl-carousel .owl-nav .owl-next,.carousel-section .owl-carousel .owl-nav .owl-prev {
  width: 50px;
  border: 1px solid #c3c3c3;
  border-radius: 50%;
  height: 50px;
  font-size: 30px;
  background-color:black;
}
.carousel-section .owl-carousel .owl-nav .owl-next:focus,.carousel-section .owl-carousel .owl-nav .owl-prev:focus {
  outline: 0;
}
.carousel-section h2 {
  font-size: 34px;
  text-align: left;
  font-weight: 700;
}
.carousel-container {
  max-width: 1140px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
  width: 100%;
}
.carousel-item {
  margin: 20px 0;
}
.carousel-item__card {
  Box-shadow: 0 13px 31px #dce1ed;
  height: 300px;
  border-radius: 12px;
  margin: 30px 0 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 500;
  border: 1px solid #dddddd;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript jquery twitter-bootstrap