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

旋转木马中的下一个和上一个按钮

owl-carousel carousel jquery javascript

flash · 技术社区 · 6 年前

我在做一个 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 }); 但效果不太好。

4 回复 | 直到 6 年前

Kurohige 6 年前

虽然没有尝试,但这应该可以做到:

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

把这个放在foreach循环之后

tao 6 年前

如owl carousel选项中所示,您要查找的是 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/owl carousel 2/2.3.4/assets/owl.carousel.min.css”rel=“样式表“/>
<link href=“https://cdnjs.cloudflare.com/ajax/libs/owlcarousel2/2.3.4/assets/owl.theme.green.min.css”rel=“样式表“/>
脚本Src=“http://ajax .gogLeAPix.COM/Ajax/LIBS/jQuery /2.1.1/jQuery .M.js”& gt;& lt;/Script & gt;
<script src=“https://cdnjs.cloudflare.com/ajax/libs/owl carousel 2/2.3.4/owl.carousel.min.js”></script>


<div class=“猫头鹰旋转木马”>
<div>您的内容<div>
<div>您的内容<div>
<div>您的内容<div>
<div>您的内容<div>
<div>您的内容<div>
<div>您的内容<div>
<div>您的内容<div>
</分区>

我最后添加了一些风格的箭头,因为一些原因,他们现在不样式(这不是像上次我使用猫头鹰)。

user9748360 6 年前

如果我没有遗漏什么,你所要求的是非常离谱的。如果你设置 nav:true 如果有多个项目,则owl.carousel本身将显示导航,如果只有一个项目,则不显示导航,如该笔所示: https://codepen.io/optionsit/pen/BPGzvV

你在用什么版本的owl.carousel?你的旋转木马里还有加价吗?

Xander 6 年前

您可以使用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>