如何隐藏轮播中单个图像的下一个和上一个按钮？

Question

我在一个网站上工作，我想在图片上放置 下一个和上一个 按钮，以便用户使用浏览图像。

我在 carousel 类中使用的 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 代码是在前端呈现的) 以便 previous/next 按钮可见。

更新：

删除显示 none 我可以看到下一个和上一个按钮，但我仍然想知道如何从单个图像中隐藏下一个和上一个按钮。

 <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

如果列表中只有一项，owl-carousel 将自动禁用 owl-prev 和 owl-next。

因此，首先确认您在列表中有多个项目。尝试增加项目数量的示例，然后看到 when/if owl-prev 和 owl-next 出现。库中有在某些情况下禁用控件的逻辑。

否则请查看下面的 link，其中建议更改 owl 库 class 的方法，以避免在某些情况下出现此问题。

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

Answer 2

不确定我是否完全理解您的问题，但也许可以从此处删除 "disabled"：

<div class="owl-nav disabled">

Answer 3

owl 默认情况下禁用轮播导航。我们必须在初始化轮播时启用它。

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

您可以参考此 link 以获得更多选项

如何隐藏轮播中单个图像的下一个和上一个按钮？

How to hide next and previous buttons for a single image in carousel?

html

javascript

php

carousel

owl-carousel