Owl Carousel - how to display Next/Prev
Posted: Tue Nov 17, 2015 8:33 am
Hi
We use the Owl Carousel on the web site.
Problem is, when there is no gallery of images - just one photo, the Dots/Nav are not there obviously, and the Next/Prev buttons don't display because they are not needed.
But this means that when we have none of these options, there is a 5-7 pix white gap below the image. I know this because we have a black box beneath some images for information on the product.
So I thought, ok, if there is no gallery, I'll set the various options to not display at all, and to lift up the Margin so that the gap closes up. And it does - BUT, here's the odd thing. It adds a 'slide' of nothing. In the code, there is no extra "item" div, and yet given time, it will slide across to a blank slide.
No missing image error on screen of a 'x', just nothing.
Take the code below OFF, and the gap returns and the extra slide is removed.
Any ideas?
$row->photo is the field we use for gallery images. In the test one I am working on the field is empty. Not NULL, but empty.
The code at the very top of the page is this:
We use the Owl Carousel on the web site.
Problem is, when there is no gallery of images - just one photo, the Dots/Nav are not there obviously, and the Next/Prev buttons don't display because they are not needed.
But this means that when we have none of these options, there is a 5-7 pix white gap below the image. I know this because we have a black box beneath some images for information on the product.
So I thought, ok, if there is no gallery, I'll set the various options to not display at all, and to lift up the Margin so that the gap closes up. And it does - BUT, here's the odd thing. It adds a 'slide' of nothing. In the code, there is no extra "item" div, and yet given time, it will slide across to a blank slide.
No missing image error on screen of a 'x', just nothing.
Take the code below OFF, and the gap returns and the extra slide is removed.
Any ideas?
$row->photo is the field we use for gallery images. In the test one I am working on the field is empty. Not NULL, but empty.
Code: Select all
if ($row->photo == "")
{
echo "<style>
.owl-buttons
{
display: none;
}
.owl-theme .owl-controls
{
margin-top: -34px;
}
.owl-theme .owl-controls .owl-page span
{
opacity: 0;
}
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page
{
opacity: 0;
}
</style>";
}Code: Select all
<link href="/js/owlslider/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="/js/owlslider/owl-carousel/owl.theme.css" rel="stylesheet">
<link href="/js/owlslider/google-code-prettify/prettify.css" rel="stylesheet">
<script src="/js/owlslider/jquery-1.9.1.min.js"></script>
<script src="/js/owlslider/owl-carousel/owl.carousel.js"></script>
<script src="/js/owlslider/bootstrap-collapse.js"></script>
<script src="/js/owlslider/bootstrap-transition.js"></script>
<script src="/js/owlslider/bootstrap-tab.js"></script>
<style>
#owl-big #own-mobile .item img{
display: block;
width: 100%;
height: auto;
}
.owl-controls
{
display: none;
}
<style>
.owl-buttons
{
display: none;
}
</style>
</style>
<script>
$(document).ready(function() {
$("#owl-big").owlCarousel({
autoPlay: 10000,
stopOnHover: true,
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem : true,
touchDrag: true,
mouseDrag: true
});
});
$(document).ready(function() {
$("#owl-mobile").owlCarousel({
autoPlay: 10000,
stopOnHover: true,
navigation : true,
slideSpeed : 2000,
paginationSpeed : 400,
singleItem : true,
touchDrag: true,
mouseDrag: true
});
});
</script>