CODEWITHSUNDEEP
javascriptphphtmlcarouselowl-carousel
flash
flash

Reputation: 1519

How to hide next and previous buttons for a single image in carousel?

I am working on a website in which I want to place next and previous buttons on images so that its easy for the users to navigate through the images.

The php code which I have used with carousel classes are:

<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>


The HTML code rendered at the front end is:

   <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>


Problem Statement:

I am wondering what changes I should do in the PHP code (as html code is rendered at the front end) above so that previous/next buttons are visible.

UPDATE:

On removing display none I can see next and previous buttons but I am wondering still how I can hide next and previous buttons from a single image. 

 <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; */
}

Upvotes: 0

Views: 3930

Answers (3)

hakkim
hakkim

Reputation: 658

For owl carousel navigation is disabled by default. We have to enable it while initializing the carousel.

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
     nav : true;
  });
});

You can refer this link for additional options

Upvotes: 1

Bossman
Bossman

Reputation: 1534

Not sure if i fully understand your question but maybe remove "disabled" from here:

<div class="owl-nav disabled">

Upvotes: 0

bcperth
bcperth

Reputation: 2291

The owl-carousel will automatically disable the owl-prev and owl-next if there is only one item in the list.

So first verify that you have more than one item in the list. Try examples with increasing numbers of items and see when/if owl-prev and owl-next appear. There is logic in the library to disable the control under certain circumstances.

Otherwise look to link below that suggests ways to change the owl library class to avoid the problem under certain circumstances.

https://github.com/OwlCarousel2/OwlCarousel2/issues/1809

Upvotes: 0

Related Questions