如何在輪播中隱藏單個圖像的下一個和上一個按鈕？

Question

我在一個網站上工作，我想在該網站上放置圖像的上一個和下一個按鈕，以便用戶輕松瀏覽圖像。

我與輪播類一起使用的php代碼是：

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

前端呈現的HTML代碼為：

   <div id="owl_item_images" class="owl-carousel owl-theme owl-loaded owl-drag">
      <div class="owl-stage-outer owl-height" style="height: 350px;">
         <div class="owl-stage" style="transform: translate3d(-7677px, 0px, 0px); transition: 1.5s; width: 8530px;">
            <div class="owl-item">
               <div class="item">
                  <div class="item_image_wrapper mx-auto">
                     <img class="item_images_carousel" src=".jpg">
                  </div>
               </div>
            </div>

            <div class="owl-item">
               ---
            </div>

            <div class="owl-item">
               ---
            </div>

            <div class="owl-item">
               ---
            </div>

            <div class="owl-item active" style="width: 853px;">
               <div class="item">
                  <div class="item_image_wrapper mx-auto">
                     <img class="item_images_carousel" src=".jpg">
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="owl-nav disabled">
         <div class="owl-prev">prev</div>
         <div class="owl-next">next</div>
      </div>
      <div class="owl-dots">
         <div class="owl-dot"><span></span></div>
         <div class="owl-dot"><span></span></div>
         <div class="owl-dot"><span></span></div>
          -
          -
          -
          -           
         <div class="owl-dot active"><span></span></div>
      </div>
   </div>

問題陳述：

我想知道我應該在上面的PHP代碼中進行哪些更改（因為html代碼在前端呈現） ，以便可見上一個/下一個按鈕。

更新：

在刪除顯示內容時，我看不到下一個和上一個按鈕，但是我仍然想知道如何隱藏單個圖像中的下一個和上一個按鈕。

 <div class="owl-nav disabled">
             <div class="owl-prev">prev</div>
             <div class="owl-next">next</div>
 </div>

.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
    /* display: none; */
}

Answer 1

對於貓頭鷹，輪播導航默認情況下處於禁用狀態。 我們必須在初始化輪播時啟用它。

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
     nav : true;
  });
});

您可以參考此鏈接以獲取其他選項

Answer 2

如果列表中只有一項，則owl-carousel將自動禁用owl-prev和owl-next。

因此，請首先確認列表中有多個項目。 嘗試增加項目數量的示例，看看何時/如果出現owl-prev和owl-next。 在某些情況下，庫中有邏輯來禁用控件。

否則，請查看下面的鏈接，其中提出了更改貓頭鷹類庫的方法，以在某些情況下避免該問題。

https://github.com/OwlCarousel2/OwlCarousel2/issues/1809

Answer 3

不知道我是否完全理解您的問題，但也許可以從此處刪除“已禁用”：

<div class="owl-nav disabled">