Şuan index sayınızı arttırıp veya eksiltmiyorsunuz. İndex sabit kalıyor. Butonlar altında onclick fonksiyonu tanımlayabilirsiniz. Ne kadar doğru olur bilmiyorum ama basit bir çözüm ile ileri butonunun altına "arttir" geri butonunun altına "eksilt" olarak birer adet onclick fonksiyon tanımlarsınız. Arttırma işlemi gerçekleştiğinde "arttir" fonksiyonu çalışır ve o anki index sayısına göre işlemleri yapar. Aynı durumu eksilt fonksiyonu içinde yaparsınız.

Js kodunuzu şu şekilde düzenleyeyim;



<script>
const images = [
{
title: "My First Slide",
url: "https://wmaraci.com/forum/images/1.jpg",
figcaption: "LA always so much fun!"
},
{
title: "My Really Second Slide",
url: "https://wmaraci.com/forum/images/2.jpg",
figcaption: "Nature is life."
},
{
title: "OMG This is the Third Slide",
url: "https://wmaraci.com/forum/images/3.jpg",
figcaption: "Some days can be so relax..."
}
];

var index = 0;

document.querySelector(".card-title").innerHTML = "Default Değer : " + index;
document.querySelector(".card-text").innerHTML = "Default Değer : " + index;
function arttir() {
index++
document.querySelector(".card-title").innerHTML = "Arttırıldı - Sayı : " + index;
document.querySelector(".card-text").innerHTML = "Arttırıldı - Sayı : " + index;
}
function eksilt() {
index--
document.querySelector(".card-title").innerHTML = "Eksiltildi - Sayı : " + index;
document.querySelector(".card-text").innerHTML = "Eksiltildi - Sayı : " + index;
}
</script>



En basit yöntem olduğunu düşünüyorum ama kullanmak istediğiniz duruma göre doğruluğu tartışılır :)

Not : " - " değere düşmemesi lazım onun eksiltme fonksiyonu içerisinde index değerinizi kontrol ettirin 0'ın altına inmeyecek şekilde ayarlayın :)