Ошибка в Javascript связанная с классами.

js
------------
const images = document.querySelectorAll('.slider img');
let dayMode = 0;

function showImage(index) {
images[dayMode].classList.remove('active');
images[index].classList.add('active');
dayMode = index;
}
let q = document.querySelectorAll('.slider_buttons');
q.forEach(function (element) {
element.addEventListener('click', function (event) {
if ( event.target .classList.contains('prev')) {
let index = dayMode - 1;
if (index < 0) {
index = images.length - 1;
}
showImage(index);
} else if ( event.target .classList.contains('next')) {
let index = dayMode + 1;
if (index >= images.length) {
index = 0;
}
showImage(index);
}
});
});

showImage(dayMode);

Cannot read properties of undefined (reading 'classList')


html
----------------
<div class="slider">
<img src="C:\xampp\htdocs\aquarium\day mods\1.png" />
<img src="C:\xampp\htdocs\aquarium\day mods\2.png" />
<img src="C:\xampp\htdocs\aquarium\day mods\3.png" />
<img src="C:\xampp\htdocs\aquarium\day mods\4.png" />
<img src="C:\xampp\htdocs\aquarium\day mods\5.png" />
<img src="C:\xampp\htdocs\aquarium\day mods\6.png" />
<img src="C:\xampp\htdocs\aquarium\day mods\7.png" />
<img src="C:\xampp\htdocs\aquarium\day mods\8.png" />
<img src="C:\xampp\htdocs\aquarium\day mods\9.png" />
<img src="C:\xampp\htdocs\aquarium\day mods\10.png" />
<img src="C:\xampp\htdocs\aquarium\day mods\11.png" />
<img src="C:\xampp\htdocs\aquarium\day mods\12.png" />
</div>


Вроде бы все в норме, в чем может быть дело?