问在旋转木马中从单个图像中隐藏下一个按钮和前一个按钮
EN

Stack Overflow用户

提问于 2018-08-06 10:27:58

回答 1查看 175关注 0票数 1

我在一个网站上工作，我想把下一个和以前的按钮在图像上，以便用户很容易地浏览图像。

我在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代码是在前端呈现的)，这样就可以看到前面的/下一个按钮。

在删除“无显示”时，我可以看到next和以前的按钮，但当旋转木马中有一个图像时，我仍然想知道如何隐藏next和以前的按钮。

HTML:

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

CSS:

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

javascript

php

jquery

carousel

语音识别特惠，低至14.9元！

提供业界非常具有性价比的语音识别服务，超高识别准确率，适用多场景

回答 1

Stack Overflow用户

发布于 2018-08-06 12:13:40

根据API文档，有一个change.owl.carousel事件来更改选项。

$('#owl_item_images').trigger('change.owl.carousel', { nav: true });

编辑:您可以在JavaScript文件中更新custom.js。下面的代码包含nav属性，并将其值设置为true。

// Items page items images carousel [Line # 62]
var owlItemImages = $('#owl_item_images');
owlItemImages.owlCarousel({
    items: 1, 
    nav: true, // enable the nav buttons
    dots: true,
    autoHeight: true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1,
            loop:false
        }
    }
});