+380681072861(and telegram) 25onealexalex@gmail.com
used ready html code
the same code from lesson 1
click Edit source(pencil icon),
paste the code below into editor field,
click Save changes(check mark icon)
1.js - there is the code for Lesson 3
(image gallery by clicking on the arrows).

2.Replace array of images(with array objects of images and titles)
to display a title of each image 

let arrayImages = [
   //file and title are properties of object
   {file: 'additional/img/nature_1.jpg', title: 'title for nature_1'},
   {file: 'additional/img/nature_2.jpg', title: 'title for nature_2'},
   {file: 'additional/img/nature_3.jpg', title: 'title for nature_3'},
   {file: 'additional/img/nature_4.jpg', title: 'title for nature_4'},
];

3.Change setAttribute src in the function createContent - dataStart.file
and add to the function createContent an algorithm for creating 
an html-element div(for the property dataStart.file)

function createContent(dataStart) {
    ...
    //file from {file: 'additional/img/nature_1.jpg', title: 'title for nature_1'},
    elementImg.setAttribute('src', dataStart.file); 
    ...
    //...plus...
    let elementDiv = document.createElement('div'); //create div
    elementDiv.setAttribute('class', 'title'); //div class="title"(for access later)
    //title from {file: 'additional/img/nature_1.jpg', title: 'title for nature_1'},
    elementDiv.innerText = dataStart.title; //text in div
    contentContainer.appendChild(elementDiv); //append to parent
    //...plus...      
}

4.Change click functions on arrow right and arrow left 
   ...
   //arrayImages[i].file INSTEAD arrayImages[i](here .file is property of object)
   document.querySelector('img').setAttribute('src', arrayImages[i].file);
   //PLUS arrayImages[i].title to the new element div class="title"(here .title is property of object)
   document.querySelector('.title').innerText = arrayImages[i].title;
}

5.Also (so that the same code is not repeated) create a new function setData(index) 
and put into it the same code from the functions changeImageRight, changeImageLeft

function setData(index) {
   document.querySelector('img').setAttribute('src', arrayImages[index].file);
   document.querySelector('.title').innerText = arrayImages[index].title;   
}

+ call it in changeImageRight, changeImageLeft 
   ...
   //instead document.querySelector('img')..., document.querySelector('.title')...  
   setData(i);
}
document.querySelector('.arrow.right').addEventListener('click', () => {
   changeImageRight();      
});

document.querySelector('.arrow.left').addEventListener('click', () => {
   changeImageLeft();      
});

let arrayImages = [
   {file: 'additional/img/nature_1.jpg', title: 'title for nature_1'},
   {file: 'additional/img/nature_2.jpg', title: 'title for nature_2'},
   {file: 'additional/img/nature_3.jpg', title: 'title for nature_3'},
   {file: 'additional/img/nature_4.jpg', title: 'title for nature_4'},
];

let i = 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;   
}

createContent(arrayImages[0]);
download the ready code