代码之家 › 专栏 › 技术社区 › flash

如何在旋转木马中隐藏单个图像的下一个和上一个按钮?

owl-carousel carousel html php javascript

flash · 技术社区 · 6 年前

我在一个网站上工作 下一个和上一个 按钮打开图像这样用户就可以轻松地浏览图像了。

我在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 回复 | 直到 6 年前

hakkim 6 年前

对于owl,默认情况下禁用carousel导航。我们必须在初始化旋转木马时启用它。

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

你可以参考这个 link 其他选项

bcperth 6 年前

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

因此,首先确认列表中有多个项。尝试增加项目数的示例,看看owl prev和owl下一次出现的时间/是否。库中存在在某些情况下禁用控件的逻辑。

否则,请查看下面的链接,该链接建议更改owl库类的方法,以避免在某些情况下出现问题。

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

Bossman 6 年前

不确定我是否完全理解您的问题,但可能从这里删除“disabled”:

<div class="owl-nav disabled">