html - 如何解决 Owl Carousel 点不可见的错误

Question

                //banner slider
                var BannerSlider = $('.banner_three_slider');
                BannerSlider.owlCarousel({
                    items: 1,
                    loop: true,
                    smartspeed: 2000,
                    animateIn: 'fadeIn',
                    animateOut: 'fadeOut',
                    autoplay: true,
                    dots: true,
                    autoplayTimeout:7000,
                    autoplayHoverPause: true,
                    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
                    responsive: {
                        300: {
                            autoplay: true
                        },
                        768: {
                            autoplay: true
                        }
                    }
                });

大家好，我正在做一个元素，我必须添加一个 Owl Carousel ，但问题是它不可见，即使我已经给出了点:真实命令我对 javascript 的了解是有限的请任何人帮助我在上面的代码中找到错误

Answer 1

尝试:

   $(document).ready(function() {
$('.owl-carousel').owlCarousel({
               items: 1,
                    loop: true,
                    smartspeed: 2000,
                    animateIn: 'fadeIn',
                    animateOut: 'fadeOut',
                    autoplay: true,
                    dots: true,
                    autoplayTimeout:7000,
                    autoplayHoverPause: true,
                    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
                responsive: {
                  300: {
                            autoplay: true
                        },
                        768: {
                            autoplay: true
                        }
                }
              })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>

<div class="owl-carousel owl-theme">
            <div class="item">
              <h4>1</h4>
            </div>
            <div class="item">
              <h4>2</h4>
            </div>
            <div class="item">
              <h4>3</h4>
            </div>
            <div class="item">
              <h4>4</h4>
            </div>
            <div class="item">
              <h4>5</h4>
            </div>
            <div class="item">
              <h4>6</h4>
            </div>
            <div class="item">
              <h4>7</h4>
            </div>
            <div class="item">
              <h4>8</h4>
            </div>
            <div class="item">
              <h4>9</h4>
            </div>
            <div class="item">
              <h4>10</h4>
            </div>
            <div class="item">
              <h4>11</h4>
            </div>
            <div class="item">
              <h4>12</h4>
            </div>
          </div>