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

时间:2018-08-04 22:26:26

标签: javascript php html carousel owl-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代码在前端呈现)中进行哪些更改,以便可以看到上一个/下一个按钮。

更新:

在删除显示时,我看不到下一个和上一个按钮,但是我仍然想知道如何隐藏单个图像中的下一个和上一个按钮。

 <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; */
}

3 个答案:

答案 0 :(得分:1)

对于猫头鹰轮播导航,默认情况下处于禁用状态。我们必须在初始化轮播时启用它。

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

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

答案 1 :(得分:0)

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

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

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

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

答案 2 :(得分:0)

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

<div class="owl-nav disabled">