Implement left and right scroll buttons in horizontal slide, make button able to loop through slide

Issue

I have created a horizontal slide and have used buttons to handle the scroll function instead of having a scroll bar. The problem is keeping the buttons inside the slide container. Secondly, I would like to know if it is possible to have a single button loop through the slider instead of switch between left and right. Below is the code

/*Css */[![This is what am trying to achieve, and that the buttons reside within the slide no matter where I move it.][1]][1]
#horizontal_slide {
 width: 320px;
 overflow-x: scroll;
 margin: 0 auto;
 white-space: nowrap; 
 scroll-behavior: smooth;
} 


/*===== MULTIPLE IMAGE DISPLAY====*/

.slide_content  { 
 background-color: #000;
 position: relative;
 display: inline-block;
}

.slide_content >  Img {
 height: 240px;
 width: 210px;
 display:block;
}

.img_descr { 
 color: #f2f2f2; 
 background: rgba(0, 0, 0, 0.6);
 width: 100%;
 font-size: 14px;
 margin: 0px;
 position: absolute;
 text-align: center;
 bottom:20px;
}

.action-btn {
 font-size:15px;
 padding :2px;
 color:#fff;
 text-align: center;
 width: 100%;
 margin:0px;
 border:0px;
 background-color: #000;
}

.action-btn  a {
 text-decoration: none;
 font-size: 15px;
 padding:2px;
 margin:0px;
 border-radius:none;
 text-align:center;
 color: white; 
}

.action-btn  a:hover {
  transform:none;
  background-color: #000;
 }


/*===== SCROLL BUTTONS====*/

#scrollLeft, #scrollRight { 
 border:none;
 text-align:center;
 border-radius:8px;
}

#scrollLeft{ 
 position: absolute;
 top:120px;
 left: 20px;
} 
#scrollRight { 
 position: absolute ;
 top:120px;
 right: 20px;

}

<!--Html-->
<div id="horizontal_slide">

  <div class="slide_content">
    <img src="link" />
    <div class="img_descr"> some text <br/> some text</div>
    <button class="action-btn">
      <a href=" #">See more</a>
    </button>
  </div>

  <div class="slide_content">
    <img src="link" />
    <div class="img_descr"> some text <br/> some text</div>
    <button class="action-btn">
      <a href=" #">See more</a>
    </button>
  </div>


  <div class="slide_content">
    <img src="link" />
    <div class="img_descr"> some text <br/> some text</div>
    <button class="action-btn">
      <a href=" #">See more</a>
    </button>
  </div>


  <div class="slide_content">
    <img src="link" />
    <div class="img_descr"> some text <br/> some text</div>
    <button class="action-btn">
      <a href=" #">See more</a>
    </button>
  </div>

  <div class="slide_content">
    <img src="link" />
    <div class="img_descr"> some text <br/> some text</div>
    <button class="action-btn">
      <a href=" #">See more</a>
    </button>
  </div>

  <button id="scrollLeft">&#10094;</button>
  <button id="scrollRight">&#10095;</button>
</div>

//JavaScript
const buttonRight = document.getElementById('scrollRight');
const buttonLeft = document.getElementById('scrollLeft');

buttonRight.onclick = function() {
  document.getElementById('horizontal_slide').scrollLeft += 200;
};

buttonLeft.onclick = function() {
  document.getElementById('horizontal_slide').scrollLeft -= 200;
};

Solution

<!-- Html -->
<div class="ads_wrapper">

<div id="horizontal_slide">

  <div class="slide_content">
    <img src="link" />
    <div class="img_descr"> some text <br/> some text</div>
    <button class="action-btn">
      <a href=" #">See more</a>
    </button>
  </div>

  <div class="slide_content">
    <img src="link" />
    <div class="img_descr"> some text <br/> some text</div>
    <button class="action-btn">
      <a href=" #">See more</a>
    </button>
  </div>

 1. List item

  <div class="slide_content">
    <img src="link" />
    <div class="img_descr"> some text <br/> some text</div>
    <button class="action-btn">
      <a href=" #">See more</a>
    </button>
  </div>


  <div class="slide_content">
    <img src="link" />
    <div class="img_descr"> some text <br/> some text</div>
    <button class="action-btn">
      <a href=" #">See more</a>
    </button>
  </div>

  <div class="slide_content">
    <img src="link" />
    <div class="img_descr"> some text <br/> some text</div>
    <button class="action-btn">
      <a href=" #">See more</a>
    </button>
  </div>

  
</div>
<button id="scrollLeft">&#10094;</button>
  <button id="scrollRight">&#10095;</button>
</div>

<!--  Css -->
.ads_wrapper { position: relative; }
#horizontal_slide {
 width: 320px;
 overflow-x: scroll;
 margin: 0 auto;
 white-space: nowrap; 
 scroll-behavior: smooth;
} 


/*===== MULTIPLE IMAGE DISPLAY====*/

.slide_content  { 
 background-color: #000;
 position: relative;
 display: inline-block;
}

.slide_content >  Img {
 height: 240px;
 width: 210px;
 display:block;
}

.img_descr { 
 color: #f2f2f2; 
 background: rgba(0, 0, 0, 0.6);
 width: 100%;
 font-size: 14px;
 margin: 0px;
 position: absolute;
 text-align: center;
 bottom:20px;
}

.action-btn {
 font-size:15px;
 padding :2px;
 color:#fff;
 text-align: center;
 width: 100%;
 margin:0px;
 border:0px;
 background-color: #000;
}

.action-btn  a {
 text-decoration: none;
 font-size: 15px;
 padding:2px;
 margin:0px;
 border-radius:none;
 text-align:center;
 color: white; 
}

.action-btn  a:hover {
  transform:none;
  background-color: #000;
 }


/*===== SCROLL BUTTONS====*/

#scrollLeft, #scrollRight { 
 border:none;
 text-align:center;
 border-radius:8px;
}

#scrollLeft{ 
 position: absolute;
 top:120px;
 left: 20px;
} 
#scrollRight { 
 position: absolute ;
 top:120px;
 right: 20px;

}

Answered By - Dwin