堆棧內存溢出
  簡體   English   中英

貓頭鷹輪播不顯示簡單的html設計中的下一個上一個按鈕

[英]Owl carousel not displaying next previous button in simple html design

 原文  2019-01-04 06:24:42  6   3    javascript/ jquery/ html/ owl-carousel

問題描述

在此處輸入圖片說明 我在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>

3 個解決方案

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

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

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

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

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

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在角度 6、7、8、9 中啟用貓頭鷹輪播的上一個和下一個按鈕 下一個和上一個按鈕owl carousel的縮略圖 如何在 Owl 輪播導航按鈕中添加“邊框”（下一個和上一個） 下一個和上一個按鈕將在OWL Carousel上滑動2個項目 如何制作帶有下一個/上一個按鈕的貓頭鷹旋轉木馬 如何在貓頭鷹輪播中在屏幕上顯示上一個和下一個滑塊一半？ 如何用箭頭而不是下一個上一個制作貓頭鷹旋轉木馬 引導輪播下一個和上一個圖像不顯示 貓頭鷹輪播不顯示 貓頭鷹傳送帶2下一個項目
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM