some svg arrows for owl carousel

owl-carousel-arrows

//css for arrows
button {
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline:0;
}

svg {
  padding: 5px;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -45px;
  margin-left: -35px;
  width: 70px;
  height: 90px;

}

.left:hover polyline,
.left:focus polyline {
  stroke-width: 3;
}

.left:active polyline {
  stroke-width: 6;
  transition: all 100ms ease-in-out;
}

.right:hover polyline,
.right:focus polyline {
  stroke-width: 3;
}

.right:active polyline {
  stroke-width: 6;
  transition: all 100ms ease-in-out;
}

polyline {
  transition: all 250ms ease-in-out;
}


//javascript for arrows
      //we'll probably want to give a context for these selectors relative to the current or a parent div of the carousel so that multiple carousels can function on a page ... don't worry about it at first.
      $('.arrow.left').click(function(e){
        owl.prev();
      });

      $('.arrow.right').click(function(e){
        owl.next();
      });

//html for arrows
<div style="position:relative">
  <div id="owl-test" class="owl-carousel">
  </div>

  <button class="arrow left"> <svg width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve"> <polyline fill="none" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points=" 45.63,75.8 0.375,38.087 45.63,0.375 "/> </svg>  </button>
  <button class="arrow right"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve"> <polyline fill="none" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points=" 0.375,0.375 45.63,38.087 0.375,75.8 "/> </svg> </button>
</div>

Where owl comes from this

  //carousel
  var owlConfig = {
    singleItem: true,
    itemsScaleUp: false,
    lazyLoad: true,
    navigation:false,
    afterInit : function(elem){
      //var that = this;
      //that.owlControls.prependTo(elem);
      //console.log(that);
    }
  };
  $("#owl-test").owlCarousel(owlConfig);