Getting error when trying to slide the prev and next images

Question

I tried so many examples where i could not post all the examples that i tried but i can share one sample where i thought it would be as per my requirement but upon using the same code i am getting error.Can any one help me out in resolving this issue.I am getting these errors:

Cannot read property 'setAttribute' of null
Uncaught TypeError: Cannot read property 'addEventListener' of null

I have the below html code which has the current image in the first div and the second div has multiple images placed horizontally.Below is my html code

<div class="container">
  <div class="column">
    <h3>Vanilla JS Slider</h3>
    <h4 class="arrows"><span class="prev">&#8592;</span><span> All Kittens </span><span class="next">&#8594;</span></h4>
    <img id="display" src="C:\namedimages\img.jpg" marginheight="0" marginwidth="0" />
  </div>
  <div id="content">
    <img src="C:\namedimages\img1.jpg" alt="Georges" class="images" />
    <img src="C:\namedimages\img2.jpg" alt="Gers" class="images" />
    <img src="C:\namedimages\img3.jpg" alt="Providence" class="images" />
    <img src="C:\namedimages\img4.jpg" alt="Providence" class="images" />
    <img src="C:\namedimages\img5.jpg" alt="Providence" class="images" />
  </div>
</div>

Jquery code- This is my function but upon clicking on perv and next buttons i am unable to see the next images which should come.

const leftArrow = document.querySelector('.prev');
const rightArrow = document.querySelector('.next');
const imageGallery = document.querySelectorAll("#content img");
const displayImg = document.querySelector("#display");
let activeImageIndex = 0;
window.addEventListener('load', renderSlider);
leftArrow.addEventListener('click', handlePrev);
window.addEventListener('keyup', handlePrev);
rightArrow.addEventListener('click', handleNext);
window.addEventListener('keyup', handleNext);
imageGallery.forEach((image, index) => {
image.addEventListener('click', () => {
    activeImageIndex = index;
    renderDisplayImage(activeImageIndex);
    setActiveClass(activeImageIndex);
    
    
    if(index === 0) leftArrow.style.display = 'none';
    else leftArrow.style.display = 'block';
  })
}) 
function renderDisplayImage(imageIndex) {
  displayImg.setAttribute('src', urls[imageIndex]);
}    
function renderSlider() {
  renderDisplayImage(activeImageIndex);
  imageGallery.forEach((img, index) => {
    img.setAttribute('src', urls[index]);
    if(index === 0) img.classList.add('active');
  })
}

function handlePrev(event) {
  if(event.type === 'keyup' && event.key !== 'ArrowLeft') return;
  
  activeImageIndex = (urls.length + (activeImageIndex-1)) % urls.length;
  renderDisplayImage(activeImageIndex);
  setActiveClass(activeImageIndex);
  
  if(activeImageIndex === 0) leftArrow.style.display = 'none';
  else leftArrow.style.display = 'block';
}


function handleNext() {
  if(event.type === 'keyup' && event.key !== 'ArrowRight') return;
  
  activeImageIndex = (activeImageIndex+1) % urls.length;
  renderDisplayImage(activeImageIndex);
  setActiveClass(activeImageIndex)
  
  if(activeImageIndex > 0) leftArrow.style.display = 'block';
  else leftArrow.style.display = 'none';
}

function setActiveClass(imageIndex) {
  imageGallery.forEach((image, index) => {
    if(index === imageIndex) image.classList.add('active');
    else image.classList.remove('active');
  })
}

CSS- Below is the CSS for Perv and Next Images

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.column img {
  width: 50%;
}

.arrows {
  display: flex;
}

.prev, .next {
  cursor: pointer;  
}

.prev {
  display: none;
}


#content {
  width: 100%;
  display: flex;
  margin-top: 20px;
}

#content img {
  width: 20%;
}

#content img.active {
  width: 20%;
  border: 2px solid red;
}

.prev, .next, .column {
  user-select: none;
}