如何解决猫头鹰轮播点不可见的错误

时间:2019-03-19 06:57:17

标签: html css owl-carousel

                //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
                        }
                    }
                });

嗨,大家好,我正在一个项目上,我必须添加一个猫头鹰轮播,但是即使我给了点,它还是不可见:true命令我对javascript的了解是有限的,任何人都可以帮助我在上面的代码中找到错误

1 个答案:

答案 0 :(得分:0)

尝试:

   $(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>