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

您可以参考此link以获得其他选项

Answer 2

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

因此，请首先确认列表中有多个项目。尝试增加项目数量的示例，看看何时/如果出现owl-prev和owl-next。在某些情况下，库中有逻辑来禁用控件。

否则，请看下面的链接，其中提出了一些方法来更改owl库类，以避免在某些情况下出现问题。

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

Answer 3

不确定我是否完全理解您的问题，但也许可以从此处删除“已禁用”：

<div class="owl-nav disabled">

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

3 个答案: