owl-carousel

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<div class="wp-gsfbu-carousel-container">
  <div class="wp-gsfbu-carousel-nav">
    <div class="wp-bup-prv"><i class="fa fa-chevron-left"></i></div>
    <div class="wp-bup-nxt"><i class="fa fa-chevron-right"></i></div>
  </div>
  <div id="owl-demo" class="owl-carousel">
    <div class="item">
      <div class="text-center">
        <img class="wp-gsfbu-carousel-img" alt="" src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png" />
        <a href="_#= itemPath =#_" target="_blank"><span class="wp-gsfbu-carousel-title">_#= title =#_</span>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="text-center">
        <img class="wp-gsfbu-carousel-img" alt="" src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png" />
        <a href="_#= itemPath =#_" target="_blank"><span class="wp-gsfbu-carousel-title">_#= title =#_</span>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="text-center">
        <img class="wp-gsfbu-carousel-img" alt="" src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png" />
        <a href="_#= itemPath =#_" target="_blank"><span class="wp-gsfbu-carousel-title">_#= title =#_</span>
        </a>
      </div>
    </div>
    <div class="item">
      <div class="text-center">
        <img class="wp-gsfbu-carousel-img" alt="" src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png" />
        <a href="_#= itemPath =#_" target="_blank"><span class="wp-gsfbu-carousel-title">_#= title =#_</span>
        </a>
      </div>
   ...

CSS

.wp-gsfbu-carousel-img {
  display: block;
  width: 50%;
  height: auto;
}

.wp-gsfbu-carousel-nav {
  position: relative;
  top: 120px;
  z-index: 10000;
}

.wp-gsfbu-carousel-nav div {
  width: 14px;
  height: 50px;
  cursor: pointer;
}

.wp-bup-prv {
  float: left;
  margin-left: -1%;
  font-size: 20px;
}

.wp-bup-nxt {
  float: right;
  margin-right: -1%;
  font-size: 20px;
}

JavaScript

$(document).ready(function() {
  var $ = jQuery;
  var owl = $('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    items: 5
  });
  // Custom Navigation Events
  $(".wp-bup-prv").click(function(evt) {
    owl.trigger('prev.owl.carousel');
  });
  $(".wp-bup-nxt").mousedown(function(evt) {
    owl.trigger('next.owl.carousel');
  });

});