我正在一个网站上,要在图像上放置下一个和上一个按钮,以便用户轻松浏览图像。
我与轮播类一起使用的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; */
}
答案 0 :(得分:1)
对于猫头鹰轮播导航,默认情况下处于禁用状态。我们必须在初始化轮播时启用它。
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
nav : true;
});
});
您可以参考此link以获得其他选项
答案 1 :(得分:0)
如果列表中只有一项,则owl-carousel将自动禁用owl-prev和owl-next。
因此,请首先确认列表中有多个项目。尝试增加项目数量的示例,看看何时/如果出现owl-prev和owl-next。在某些情况下,库中有逻辑来禁用控件。
否则,请看下面的链接,其中提出了一些方法来更改owl库类,以避免在某些情况下出现问题。
答案 2 :(得分:0)
不确定我是否完全理解您的问题,但也许可以从此处删除“已禁用”:
<div class="owl-nav disabled">