如何隐藏第一张图片的左箭头和最后一张图片的右箭头

<div class="slider-container">
  <ul class="slider">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
  </ul>
  <span class="arrow left-arrow"></span>
  <span class="arrow right-arrow"></span>
</div>

.slider-container {
  position: relative;
}

.slider {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
}

.slider li {
  position: relative;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: #000;
  color: #fff;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.left-arrow {
  left: 0;
}

.right-arrow {
  right: 0;
}

var slider = document.querySelector('.slider');
var leftArrow = document.querySelector('.left-arrow');
var rightArrow = document.querySelector('.right-arrow');

leftArrow.addEventListener('click', function() {
  // Code to move to the previous image
});

rightArrow.addEventListener('click', function() {
  // Code to move to the next image
});