輪播中的下一個和上一個按鈕

Question

我在一個網站上工作， 當輪播中只有一個圖像時 ，我想隱藏下一個和上一個按鈕， 而在有多個圖像時，要顯示下一個和上一個按鈕 。

我用來在前端渲染多個圖像的php代碼是：

<div class="col-9 text-center border-right px-0">
   <div id="owl_item_images" class="owl-carousel owl-theme">
      <?php
         if(isset($data['item']->gallery))
         {
         foreach ($data['item']->gallery as $gallery)
         {
         echo '<div class="item">
         <div class="item_image_wrapper mx-auto">
         <img class="item_images_carousel" src="'.$gallery->url.'">
         </div>
         </div>';
         //'.$gallery->url.';
         }
         }
         ?>
   </div>
</div>

問題陳述：

我想知道我需要添加哪些輪播代碼，以便在有多個圖像時顯示下一個和上一個按鈕 ，而在有單個圖像時不顯示下一個和上一個按鈕 。

我試過的

<script>$('#owl_item_images').owlCarousel({nav : false});</script>通過該操作，所有圖像在旋轉木馬中都可見（圖像並排排列）。

我也嘗試使用以下代碼：

$('#owl_item_images').trigger('change.owl.carousel', { nav: true }); 但效果不佳。

Answer 1

您可以使用jQuery計算輪播中的圖片數量。 然后，僅在有多個圖像時顯示導航。

嘗試這個：

<script>
var imageCount = $('#owl_item_images .item_images_carousel').length;
var showNav = false;
if (imageCount > 1) showNav = true;
$('#owl_item_images').owlCarousel({nav : showNav});
</script>

Answer 2

沒有嘗試過，但這應該可以解決問題：

if(size($data['item']->gallery)<=1)
{
   echo "<script>
          $(function(){
                $('#owl_item_images').owlCarousel({nav : false});
           });
         </script>";
}

將其放在foreach循環之后

Answer 3

如Owl Carousel的選項所示，您要查找的名稱稱為nav 。

想要使用箭頭時，請使用nav:true ；否則，請使用nav:false 。

沒有箭頭：

 $('.owl-carousel').owlCarousel({ nav:false, items:1, center:true, dots:false, loop: true }) 

 .owl-carousel .owl-item > div { height: 100vh; background-color: #212121; color: white; display: flex; align-items: center; justify-content:center; } body {margin: 0;} 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.green.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <div class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> </div> 

帶有箭頭：

 $('.owl-carousel').owlCarousel({ nav:true, items:1, center:true, dots:false, loop: true }) 

 .owl-carousel .owl-item > div { height: 100vh; background-color: #212121; color: white; display: flex; align-items: center; justify-content:center; } body {margin: 0;} .owl-nav { pointer-events: none; position: absolute; width: 100%; top: 50%; display: flex; justify-content: space-between; color: white; font-size: 5rem; } .owl-nav button{ pointer-events: all; width: 5rem; transform: translateY(-50%); } .owl-nav button span { display: flex; align-items:center; justify-content: center; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.green.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <div class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> </div> 

我最終在箭頭上添加了一些樣式，由於某種原因，它們現在變成了未樣式化（我上次使用Owl並不是這樣）。

Answer 4

如果我沒有丟失任何東西，那么您的要求幾乎是開箱即用的。 如果您設置了nav:true owl.carousel本身將顯示導航（如果有多個項目），而如果只有一個項目則不顯示導航，如該筆所示： https : //codepen.io/optionsit/pen/BPGzvV

您使用的是哪個版本的owl.carousel？ 輪播中是否還有標記？