Question

我正在website上工作，当轮播中只有一个图像时，我想在其中隐藏下一个和上一个按钮，并在出现时显示下一个和上一个按钮是多张图片。

我用来在前端渲染多个图像的php代码是：

<div class="col-9 text-center border-right px-0">
   <div id="owl_item_images" class="owl-carousel owl-theme">
      <?php
         if(isset($data['item']->gallery))
         {
         foreach ($data['item']->gallery as $gallery)
         {
         echo '<div class="item">
         <div class="item_image_wrapper mx-auto">
         <img class="item_images_carousel" src="'.$gallery->url.'">
         </div>
         </div>';
         //'.$gallery->url.';
         }
         }
         ?>
   </div>
</div>

问题陈述：

我想知道我需要添加哪些轮播代码，以便在有多个图像时显示下一个和上一个按钮，而在下一个和上一个按钮不显示有单个图像。

我尝试过的事情：

<script>$('#owl_item_images').owlCarousel({nav : false});</script>使用该选项，所有图像都可以在圆盘传送带内看到（图像并排排列）。

我还尝试了以下代码：

$('#owl_item_images').trigger('change.owl.carousel', { nav: true });，但效果不佳。

Answer 1

您可以使用jQuery计算轮播中的图片数量。然后，仅在有多个图像时显示导航。

尝试一下：

<script>
var imageCount = $('#owl_item_images .item_images_carousel').length;
var showNav = false;
if (imageCount > 1) showNav = true;
$('#owl_item_images').owlCarousel({nav : showNav});
</script>

Answer 2

没有尝试过，但这应该可以解决问题：

if(size($data['item']->gallery)<=1)
{
   echo "<script>
          $(function(){
                $('#owl_item_images').owlCarousel({nav : false});
           });
         </script>";
}

在foreach循环之后输入

Answer 3

如“猫头鹰轮播”中的选项所示，您要查找的那个称为nav。

在需要箭头时使用nav:true，在不需要箭头时使用nav:false。

没有箭头：

$('.owl-carousel').owlCarousel({
  nav:false,
  items:1,
  center:true,
  dots:false,
  loop: true
})

.owl-carousel .owl-item > div {
  height: 100vh;
  background-color: #212121;
  color: white;
  display: flex;
  align-items: center;
  justify-content:center;
}

body {margin: 0;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.green.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

带有箭头：

$('.owl-carousel').owlCarousel({
  nav:true,
  items:1,
  center:true,
  dots:false,
  loop: true
})

.owl-carousel .owl-item > div {
  height: 100vh;
  background-color: #212121;
  color: white;
  display: flex;
  align-items: center;
  justify-content:center;
}

body {margin: 0;}

.owl-nav {
  pointer-events: none;
  position: absolute;
  width: 100%;
  top: 50%;
  display: flex;
  justify-content: space-between;
  color: white;
  font-size: 5rem;
}

.owl-nav button{
  pointer-events: all;
  width: 5rem;
  transform: translateY(-50%);
}
.owl-nav button span {
  display: flex;
  align-items:center;
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.green.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

我最终在箭头上添加了一些样式，由于某种原因，它们现在变成了未样式化（我上次使用Owl时不像这样）。

Answer 4

如果我没有丢失任何东西，那么您的要求几乎是开箱即用的。如果您设置了nav:true，则owl.carousel本身将显示导航项（如果有多个项），而不会导航（如果只有一项），如该笔所示： https://codepen.io/optionsit/pen/BPGzvV

您使用的是哪个版本的owl.carousel？轮播中还有标记吗？

轮播中的下一个和上一个按钮

4 个答案: