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 2
(events click on the arrows).

2.Make a array and a counter to use more jpg files(not 2, like 4 or ...)

//array of images
let arrayImages = [
         'additional/img/nature_1.jpg',
         'additional/img/nature_2.jpg',
         'additional/img/nature_3.jpg',
         'additional/img/nature_4.jpg',
         ];

//counter - global variable, initial value 0 - first jpg file
//the counter will be used to store the number of the displayed jpg file
let i = 0;

...

3.Change call the function:

//arrayImages[0] - the first element from array('additional/img/nature_1.jpg')
createContent(arrayImages[0]);

4.Change click-functions of arrows:

//CHANGE function click on arrow right
function changeImageRight() {
   i++; //each click - counter increment

   //last img file in the array(i == arrayImages.length) - start from the beginning
   if (i == arrayImages.length) {
      i = 0; //counter reset to 0(the beginning of the array)
   }

   //display(setAttribute src) next(i++) img file from array
   document.querySelector('img').setAttribute('src', arrayImages[i]);
}

//CHANGE function click on arrow left
function changeImageLeft() {
   i--; //each click - counter decrement

   //first img file in the array(i == -1) - start from the ending
   if (i == -1) {
      i = arrayImages.length - 1; //counter reset to arrayImages.length - 1(the ending of the array)
   }

   //display(setAttribute src) previous(i--) img file from array
   document.querySelector('img').setAttribute('src', arrayImages[i]);
}