Owl Carousel - how to display Next/Prev

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Owl Carousel - how to display Next/Prev

Post by simonmlewis »

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.

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>";
	    }
The code at the very top of the page is this:

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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply