How to Make a Owl Carousel With Arrows Instead of Next Previous

How to make a owl carousel with arrows instead of next previous

This is how you do it in your $(document).ready() function with FontAwesome Icons:

 $( ".owl-prev").html('<i class="fa fa-chevron-left"></i>');
 $( ".owl-next").html('<i class="fa fa-chevron-right"></i>');

How to create navigation arrow in Owl carousel

I give you a example but i used owl carousal 2

here

var heroSlider = $('#header-slider');
heroSlider.owlCarousel({    
    margin:0,
    autoplay:true,
    autoplayTimeout:4000,
    smartSpeed:2000,
    dots:true,
    loop:true,      
    responsiveClass:true,
    items:1,
    rtl: true,
    nav: true,
     navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],

});

for the correct position we need to set the positions of the arrows.By styling them.

something like this

.owl-prev {
    left: 0;
    position: absolute;
}

.owl-next {
    position: absolute;
    right: 0;
}

Owl Carousel, making custom navigation

You need to enable navigation and edit navigationText:

owlgraphic.com/owlcarousel/#customizing

Note: It appears the site for Owl 1.3 is now down, so here is a forked Codepen example.

$("#owl-example").owlCarousel({
  navigation: true,
  navigationText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#nav

$("#owl-example").owlCarousel({
  nav: true,
  navText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"]
});

Personal suggestion: Use Slick over Owl

Personal suggestion update: Tiny slider is great too.

Owl carousel navigation arrows on side

One way to go about this would be to set position: relative for the main slideshow container (that contains all of the slideshow elements). Then, make .owl-prev and .owl-next position: absolute; and define your parameters from there. So for instance, you will want .owl-prev to be left:0; and .owl-next to be right:0; Then, use a negative value for the top property of each.

You would want to set position: relative for the main container so that it is relative to its normal positioning in the DOM. Then, position absolute for the elements contained inside of the main container is absolute to that container, which allows you to position them more specifically.

In summary:

    .your-slideshow-container-class {
      position:relative;
    }

    .owl-prev, .owl-next {
        position:absolute;
     }

    .owl-prev {
        left:0;
        top: 200px;
     }

     .owl-next {
        right:0;
        top:200px;
     }

I hope this helps! :)

Owl Carousel - Skips Past Images using Prev / Next

With @Tiberiuscan pointing me in the right direction, I figured out a solution:

The click for next image part was targeting the entire owl carousel for clicks.

I modified this code to target the owl-item div and that resolved the issue, as below:

      // click for next image
  $('.owl-item').click(function() {
    owl.trigger('next.owl');
  })

Thanks again, @Tiberiuscan

How to put arrows in Owl Carrousel?

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>