Question

我在html设计中使用的是Owl carousel。它工作正常，但不显示上一个和下一个按钮。然后我在页面中添加了按钮，但它仍然没有显示。而且，我在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>

Answer 1

$(document).ready(function(e) {
    $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 0,
        autoplay: true,
        smartSpeed: 500,
        nav: true,
        dots: false,
		navText: ['<span aria-label="Previous">‹</span>','<span aria-label="Next">›</span>'],
		lazyLoad:true,
    });
});

.owl-carousel .owl-nav button{width:25px; text-align:center; border:1px solid #ccc !important;}

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</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="https://png.pngtree.com/thumb_back/fw800/20151028/pngtree-Design-Light-Texture-Wallpaper-background-photo-674871.jpg" alt="image">
                 </div>
                 <div class="item" data-hash="two">
                    <img class="block-image" src="https://blog.sonicwall.com/wp-content/uploads/2018/05/SNWL-image-412.jpg" alt="image">
                 </div>
                 <div class="item" data-hash="three">
                    <img class="block-image" src="http://www.rishtiindia.com/wp-content/uploads/2016/01/Background-Image-of-Flyer-Brochure.jpg" alt="image">
                 </div>
                 <div class="item" data-hash="four">
                    <img class="block-image" src="https://ane4bf-datap1.s3-eu-west-1.amazonaws.com/wmocms/s3fs-public/news/featured_media/featured-image-index.png?4t5V5QpQ.h.L2MpEUHsgfJM_lASy4dbb" alt="image">
                 </div>
              </div>
           </div>
           
        </div>
     </div>
  </section>
  
</body>
</html>

Answer 2

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

Answer 3

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

猫头鹰轮播不会在简单的html设计中显示下一个上一个按钮

3 个答案: