script.js

const images = [
    { src: 'images/pepper1.jpg', name: 'Pepper 1' },
    { src: 'images/pepper2.jpg', name: 'Pepper 2' },
    { src: 'images/pepper3.jpg', name: 'Pepper 3' },
    { src: 'images/pepper4.jpg', name: 'Pepper 4' },
    { src: 'images/pepper5.jpg', name: 'Pepper 5' },
    { src: 'images/snickers1.jpg', name: 'Snickers 1' },
    { src: 'images/snickers2.jpg', name: 'Snickers 2' },
    { src: 'images/snickers3.jpg', name: 'Snickers 3' },
    { src: 'images/snickers4.jpg', name: 'Snickers 4' },
    { src: 'images/snickers5.jpg', name: 'Snickers 5' }
];

let currentIndex = 0;


// get elements by id for selected-Image, image-name, left-arrow and right arrow
// get elements by query selector all for .thumbnail
const selectedImage = null
const imageName = null
const leftArrow = null
const rightArrow = null
const thumbnails = null

// to update the selected image and the displayed image name
function updateGallery() {

}


// to change current index to the next one
// if at end of gallery, start from begining again 
// call update gallery
function nextImage() {
    
}

// to change current index to the prevous one
// if at begining of gallery, change to end
// call update gallery
function prevImage() {
   
}

// change current index to selected thumbnail index
// call updateGallery
function selectThumbnail(index){
   
}

// add functions to elements by adding event listners or directly in the html