jquery 在简单html设计中不显示下一个上一个按钮的猫头鹰转盘

kcrjzv8t 于 2022-11-22 发布在 jQuery

关注(0)|答案(3)|浏览(129)

我在我的html desing中使用猫头鹰旋转木马。它工作正常，但没有显示下一个和上一个按钮。然后我在我的页面中添加了按钮，但它仍然没有显示。我也以同样的方式在我的Laravel刀片模板中实现了它的工作正常与下一个上一个按钮。我已经添加了猫头鹰旋转木马版本2.3.4。下面是我的代码，我已经在我的Html中完成了：
我已经添加了它的图片。在第一张图片它是工作正常的laravel刀片。而在第二它是不显示箭头按钮的下一个和上一个。

我已经搜索了它，但我没有得到任何适当的解决方案。有人知道它是什么问题吗？我错过了什么？感谢帮助提前。

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/boxicons.min.css">
  <link rel="stylesheet" href="css/datepicker.min.css">
  <link rel="stylesheet" href="css/owl.carousel.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <section class="features">
     <img src="images/features  -bg.jpg" alt="Fitzoh" class="features-bg">
     <div class="container">
        <div class="row align-items-center">
           <div class="col-12 col-lg-6 text-center text-lg-left">
              <h6 class="text-light-green">Standout with Fitzoh</h6>
              <div class="divider-sm"></div>
              <h2>Take your fitness business to the next level</h2>
              <p>With Fitzoh, adopting a better client experience has been made easier than ever.</p>
              <a href="#" title="" class="btn btn-lg btn-primary btn-round">Know More</a>
              <div class="features-list mt48 text-left">
                 <a href="#one" class="feature mb24 active">
                    <p class="mb0">Add value to your brand through your own application</p>
                 </a>
                 <a href="#two" class="feature mb24">
                    <p class="mb0">Enhance client experience through virtual training</p>
                 </a>
                 <a href="#three" class="feature mb24">
                    <p class="mb0">Create your own excercise and diet plans</p>
                 </a>
                 <a href="#four" class="feature mb24">
                    <p class="mb0">Easy Scheduling & performance tracking</p>
                 </a>
              </div>
           </div>
           <div class="col-12 col-lg-6 text-center text-lg-right">
              <div class="owl-carousel">
                 <div class="item" data-hash="one">
                    <img class="block-image" src="images/feature1.png" alt="image">
                 </div>
                 <div class="item" data-hash="two">
                    <img class="block-image" src="images/feature2.png" alt="image">
                 </div>
                 <div class="item" data-hash="three">
                    <img class="block-image" src="images/feature3.png" alt="image">
                 </div>
                 <div class="item" data-hash="four">
                    <img class="block-image" src="images/feature1.png" alt="image">
                 </div>
              </div>
           </div>
           <div class="owl-nav">
              <!-- thess buttons I have added manually -->
              <button type="button" role="presentation" class="owl-prev">
              <span aria-label="Previous">‹</span>
              </button>
              <button type="button" role="presentation" class="owl-next">
              <span aria-label="Next">›</span>
              </button>
           </div>
        </div>
     </div>
  </section>
  <script src="js/jquery-3.3.1.slim.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/datepicker.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

jquery

来源：https://stackoverflow.com/questions/54033982/owl-carousel-not-displaying-next-previous-button-in-simple-html-design

3条答案

按热度按时间

tag5nh1u1#

第一个

赞(0）回复(0）举报 2022-11-22

cbeh67ev2#

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    dots:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

赞(0）回复(0）举报 2022-11-22

h22fl7wq3#

nav：true -〉启用箭头导航，dots：true -〉启用点导航

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true,
            dots: true
        },
        600:{
            items:3,
            nav:true,
            dots: true
        },
        1000:{
            items:5,
            nav:true,
            dots: true
        }
    }
})

赞(0）回复(0）举报 2022-11-22

我来回答

jquery 在简单html设计中不显示下一个上一个按钮的猫头鹰转盘

3条答案

相关问题

热门标签

最新问答