document.querySelector('.arrow.right').addEventListener('click', () => {
    olympics24.changeImageRight();     
 });
 
 document.querySelector('.arrow.left').addEventListener('click', () => {
    olympics24.changeImageLeft();     
 });
 
 class Olympics24 {

    constructor() {
        this.arrayImages = [];  
        this.i = 0;
    }
 
    async getData() {
        let responce = await fetch("https://olympics24.25one.com.ua/index.php");

        /*
        .then(responce => {
            return responce.json();
        })
        .then(data => {
            console.log(data);
            this.arrayImages = data;
            this.createContent(this.arrayImages[0]);
        }); 
        */

        this.arrayImages = await responce.json();
        this.createContent(this.arrayImages[0]);
    } 
    
    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);
    }
    
    changeImageRight() {
        this.i++;
        
        if (this.i == this.arrayImages.length) {
            this.i = 0;
        }
        
        this.setData(this.i);
    }
    
    changeImageLeft() {
        this.i--;
        
        if (this.i == -1) {
            this.i = this.arrayImages.length - 1;
        }
        
        this.setData(this.i);
    }
    
    setData(index) {
        document.querySelector('img').setAttribute('src', this.arrayImages[index].file);
        document.querySelector('.title').innerText = this.arrayImages[index].title;   
    }

 }

let olympics24 = new Olympics24;

olympics24.getData();