在旋转木马中从单个图像中隐藏下一个按钮和前一个按钮
在旋转木马中从单个图像中隐藏下一个按钮和前一个按钮
提问于 2018-08-06 18:27:58
我在一个网站上工作，我想把下一个和以前的按钮在图像上，以便用户很容易地浏览图像。
我在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; */
}回答 1
Stack Overflow用户
发布于 2018-08-06 20: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
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51713626
复制相关文章
相似问题
腾讯云开发者
