document.querySelector('.arrow.right').addEventListener('click', () => {
    changeImageRight();      
 });
 
 document.querySelector('.arrow.left').addEventListener('click', () => {
    changeImageLeft();      
 });
 
 let arrayImages = [];
 
 let i = 0;
 
 function getData() {
     fetch("https://olympics24.25one.com.ua/index.php")
     .then(responce => {
         return responce.json();
     })
     .then(data => {
         console.log(data); //data - an array of objects from API
 
         arrayImages = data; 
 
         createContent(arrayImages[0]); 
     }); 
 } 
 
 function createContent(dataStart) {
    let contentContainer = document.querySelector('.wrap');
 
    let elementImg = document.createElement('img');
    elementImg.setAttribute('src', dataStart.file);
    contentContainer.appendChild(elementImg);
 
     let elementDiv = document.createElement('div');
     elementDiv.setAttribute('class', 'title');
     elementDiv.innerText = dataStart.title;
     contentContainer.appendChild(elementDiv);
 }
 
 function changeImageRight() {
   i++;
 
   if (i == arrayImages.length) {
      i = 0;
   }
 
   setData(i);
 }
 
 function changeImageLeft() {
   i--;
 
   if (i == -1) {
      i = arrayImages.length - 1;
   }
 
   setData(i);
 }
 
 function setData(index) {
    document.querySelector('img').setAttribute('src', arrayImages[index].file);
    document.querySelector('.title').innerText = arrayImages[index].title;   
 }
 
 getData();