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代码在前端呈现）进行哪些更改，以便可以看到上一个/下一个按钮。

在移除显示器时，我看不到下一个和上一个按钮，但是我仍然想知道当轮播中只有一个图像时如何隐藏下一个和上一个按钮。

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

Answer 1

根据API documentation，有一个change.owl.carousel事件用于更改选项。

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

编辑：您可以在custom.js文件中更新JavaScript。下面的代码包含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
        }
    }
});

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

1 个答案: