trying to change the scroll bar to arrows ! No bootstrap Please

Question

I have tried this demo I found online for practice in code and created this slider and it was much easier to get it with the scroll bar as they was already a script made for it. now I am trying to modify this script and its css to change the scrollbar into arrows on the right an left side. I have been trying for a month now looking at videos and more ... nothing! Bootstrap sounds much easier to do it but for some reason it messes up with my website.

$(document).ready(function() {
  $("#controller a").bind("click", function(event) {
    event.preventDefault();
    var target = $(".logo-container");
    $("#you").stop().animate({
      scrollLeft: $(target.next()).offset().left
    }, 1200);
  });
}); 
  

@media screen and (max-width:780px) {
	.logo-container {
		display: none;
	}
}

@media screen and (max-width:780px) {
	.logo-slider {
		display: none;
	}
}


/*background*/

.logo-slider {
	display: flex;
	flex-direction: row;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	width: 100%;
	padding-top: 2%;
	padding-bottom: 2%;
	position: relative;
}


/*text*/

.logo-container {
	background-color: #ffffff;
	width: calc(100%/5);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
	transition: all 0.3s ease;
	flex: 0 0 auto;
	margin-left: 2%;
	color: #000;
	border-style: solid;
	border-color: #000;
	border-width: 2px;
}


/*left margin*/

.first {
	margin-left: 1.5%;
}

#last {}


/*shadow on hover*/

.logo-container:hover {
	box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
	transition: all 0.4s ease;
}

.logo img {
	max-width: 94%;
	border-style: solid;
	border-color: #000;
	margin-left: 2%;
	margin-top: 2%;
	border-width: 2px;
}


/*desc en bas*/

.logo-description {
	padding: 6%;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 20px;
}

.scroller-controls {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	background-color: #fff;
}


/*rendre images adaptable*/

.responsive {
	width: 100%;
	height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id="you" class="logo-slider">
   <div id="first" class="logo-container first">
      <div class="logo">
         <img src=";RS=300" alt="Texte alternatif" class="responsive" />
      </div>
      <div class="logo-description"><strong></strong></div>
      <p style="text-align: center;"> </p>
   </div>
   <div class="logo-container">
      <div class="logo">
         <img src=";RS=300" alt="Texte alternatif" class="responsive" />
      </div>
      <div class="logo-description"><strong></strong></div>
      <p style="text-align: center;"> </p>
   </div>
   <div class="logo-container">
      <div class="logo">
         <img src=";RS=300" alt="Texte alternatif" class="responsive" />
      </div>
      <div class="logo-description"><strong></strong></div>
      <p style="text-align: center;"> </p>
   </div>
   <div class="logo-container">
      <div class="logo">
         <img src=";RS=300" alt="Texte alternatif" class="responsive" />
      </div>
      <div class="logo-description"><strong>
         </strong>
      </div>
      <p style="text-align: center;"></p>
   </div>
   <div id="end" class="logo-container">
      <div class="logo">
         <img src=";;RS=300" alt="Texte alternatif" class="responsive" />
      </div>
      <div class="logo-description"><strong>
         </strong>
      </div>
      <p style="text-align: center;"> </p>
   </div>
</section>

Answer 1

Some research in the jQuery documentation. Some thinking and I came up with this solution:

(($) => {
  
  let scrollValue = 0;  // Store the current position
  const list = $('#scroll-with-buttons');
  const maxHorizontalScroll = 1000;
  const scrollSpeed = 20;
  let direction = 'none';
  let scrollInterval = null;
  
  function startScrolling() {
    if (direction == 'L') {
      scrollValue -= scrollSpeed;

      if (scrollValue < 1) {
        scrollValue = 0;
      }

      list.scrollLeft(scrollValue);
    }
    else if (direction == 'R') {
      scrollValue += scrollSpeed;

      if (scrollValue > maxHorizontalScroll) {
        scrollValue = maxHorizontalScroll;
      }

      list.scrollLeft(++scrollValue);
    }
  }
  
  $('#left-scroll').on('mousedown', () => {
    direction = 'L';
    scrollInterval = setInterval(startScrolling, 10);
  });
  
  $('#right-scroll').on('mousedown', () => {
    direction = 'R';
    scrollInterval = setInterval(startScrolling, 10);
  });
  
  $(document).mouseup(() => {
    direction = '';
    clearInterval(scrollInterval);
  });
  
})(jQuery);

.elements {
  list-style-type: none;
  overflow: auto;
  overflow-x: hidden;  /*hide default scrollbar*/
  white-space: nowrap;  /*makes list scrollable*/
  margin: 0;
  padding: 0;
}

.element {
  display: inline-block;
  
  padding: 5px;
  height: 50px;
  width: 100px;
  background: rgb(37, 37, 37);
  color: rgb(240, 240, 240);
}

#left-scroll,
#right-scroll {
  font-size: 25px;
}

#left-scroll {
  float: left;
}

#right-scroll {
  float: right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul id="scroll-with-buttons" class="elements">
  <li class="element">Element 1</li>
  <li class="element">Element 2</li>
  <li class="element">Element 3</li>
  <li class="element">Element 4</li>
  <li class="element">Element 5</li>
  <li class="element">Element 6</li>
  <li class="element">Element 7</li>
  <li class="element">Element 8</li>
  <li class="element">Element 9</li>
  <li class="element">Element 10</li>
</ul>

<button id="left-scroll"><i class="fas fa-arrow-circle-left"></i></button>
<button id="right-scroll"><i class="fas fa-arrow-circle-right"></i></button>