CODEWITHSUNDEEP
javascriptjqueryhtmlcssowl-carousel
Kali
Kali

Reputation: 613

How to put arrows in Owl Carrousel?

Is there any way to put navigation arrows in owl carousel by js or html+css? It is working correct, but I think it's no so good you have to drag the image to navigate, therefore a arrow would fix this problem for me. I found some answers through the internet but none of them works for me, when I modify something on the js, the carrousel stops working.

 <div class="owl-carousel owl-theme" >
<div class="item itemmb">

    <img class="img-fluid img-card" src="Imagens/dent.jpg">
    <h4 class="h4 text-center my-3"> Test </h4>
     <h4 class="p text-center my-3 sb-m saiba-mais"> Test </h4>

 </div>



  <div class="item">

    <img class="img-fluid img-card" src="Imagens/ped.jpg">
     <h4 class="h4 text-center my-3"> Test </h4>
     <h4 class="h4 text-center my-3 sb-m saiba-mais"> Test </h4>
 </div>
                 <div class="item">

    <img class="img-fluid img-card" src="Imagens/ped.jpg">
     <h4 class="h4 text-center my-3"> Test </h4>
     <h4 class="h4 text-center my-3 sb-m saiba-mais"> Test </h4>
 </div>


     <script type="text/javascript">
   $('.owl-carousel').owlCarousel({
loop:true,
navigation: true,
margin:20,
nav:true,
responsive:

       {
    0:{
        items:1
    },
    600:{
        items:3
    },
    1000:{
        items:5
    }
}

})

   </script>

enter image description here

Upvotes: 0

Views: 848

Answers (1)

Ramesh
Ramesh

Reputation: 2403

It's because of the responsive initialization.If you don't have enough items there won't be any arrow or dots dispayed

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 20,
  nav: true,
  responsive:

  {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  }
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme">
  <div class=" itemmb">

    <img class="img-fluid img-card" src="http://www.windmillsonline.co.uk/wp-content/uploads/2013/03/img-banner-thefoundation.jpg">
    <h4 class="h4 text-center my-3"> Test </h4>
    <h4 class="p text-center my-3 sb-m saiba-mais"> Test </h4>

  </div>



  <div class="">

    <img class="img-fluid img-card" src="http://www.windmillsonline.co.uk/wp-content/uploads/2013/03/img-banner-thefoundation.jpg">
    <h4 class="h4 text-center my-3"> Test </h4>
    <h4 class="h4 text-center my-3 sb-m saiba-mais"> Test </h4>
  </div>
  <div class="">

    <img class="img-fluid img-card" src="http://www.windmillsonline.co.uk/wp-content/uploads/2013/03/img-banner-thefoundation.jpg">
    <h4 class="h4 text-center my-3"> Test </h4>
    <h4 class="h4 text-center my-3 sb-m saiba-mais"> Test </h4>
  </div>

</div>

Upvotes: 1

Related Questions