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

Question

I am using Owl carousel in my html desing. 我在HTML设计中使用Owl carousel。 It is working fine but not displaying next and previous button. 它工作正常，但不显示上一个和下一个按钮。 Then I have added button in my page still it is not displaying. 然后我在页面中添加了按钮，但它仍然没有显示。 And I have also implemented in same way in my Laravel blade template in it's working fine with next previous button. 而且，我在Laravel刀片模板中也以相同的方式实现了该功能，可以与下一个上一个按钮正常工作。 I have added Owl carousel version 2.3.4. 我添加了猫头鹰轮播版本2.3.4。 Here is my code which I have done in my Html: 这是我在HTML中完成的代码：

I have added pictures of it. 我已经添加了图片。 in first picture it is working fine with laravel blade. 在第一张照片中，它与laravel刀片一起工作良好。 And in second it is not displaying arrow button for next and previous. 在第二秒中，它不显示上一个和下一个的箭头按钮。 I have searched it but I didn't got any proper solution. 我已经搜索过，但没有任何适当的解决方案。 Does anyone knows what is wrong with it? 有谁知道这是怎么回事？ Did I missed something? 我错过了什么吗？ Thanks for the help in advance. 我在这里先向您的帮助表示感谢。

<!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 -> Enable arrow navigation, dots:true -> Enable dot navigation nav：true->启用箭头导航，点：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 个解决方案

解决方案1
0 2019-01-04 06:57:11

解决方案2
0 2019-01-04 07:23:45

解决方案3
0 2019-01-04 08:22:32

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

问题描述

3 个解决方案

解决方案1 0 2019-01-04 06:57:11

解决方案2 0 2019-01-04 07:23:45

解决方案3 0 2019-01-04 08:22:32

解决方案1
0 2019-01-04 06:57:11

解决方案2
0 2019-01-04 07:23:45

解决方案3
0 2019-01-04 08:22:32