arrows on carousels

_team-carousel.scsss

#section-team-carousel {
  padding: 25px 0;
  background-color: #e1eef6;
  border-top: solid 5px white;
  border-bottom: solid 5px white;

  .heading {
    color: #2e2e2e;
  }

  .owl-carousel .owl-nav [class*=owl-] {
    top: 45%;
  }

  .owl-carousel .owl-nav [class*=owl-],
  .owl-carousel:hover .owl-nav .owl-next {
    opacity: 1;
  }

  .full-width-wrapper {
    position: relative;
  }

  .team--full-width,
  .owl-carousel {
    position: static !important;
  }
}

scripts.js

  HelloWorldDevsTysonSteele.pyramidCarousel('.js-team-carousel', {
    items: 1,
    autoplay: true,
    navText: [
      '<img src="assets/arrow-left.png">',
      '<img src="assets/arrow-right.png">'
    ],
    responsive: {
      550: {
        items: 2
      },
      768: {
        items: 3
      },
      992: {
        items: 4,
        nav: false,
        autoplay: false
      }
    },
    margin: 15
  });

team__carousel.twig

<section id="section-team-carousel">
    <div class="full-width-wrapper">
     <div class="container team--full-width">
         <h2 class="heading center">Meet the Team</h2>
         <div class="owl-carousel js-team-carousel">
             {% include 'molecules/team__cards.twig' %}
         </div>
        </div>
    </div>
</section>

{% include 'molecules/team__modals.twig' %}