Change image, title and counter on button click?

I have a problem with a website I am designing and programming. It is a client portfolio. I am making the responsive versions, and when reducing to a mobile screen or something like that, I've hide the links of the index that allow you to select the project when you click on them, changing the main cover of the site and changing a number in the counter.

So, in the mobile version, I want to design the index like this: I have an image with a title, two buttons ("Previous project" and "Next Project) and a counter. I am using Bootstrap for the HTML and CSS. You can take a look at it in the image below:

![https://i.imgur.com/FKykPlh.jpg]

The thing is that I am quite new about JS and jQuery, so for the desktop version, I've created different functions for each button (in the desktop version, the buttons were not previous and next project, there were the name of the project, and I had like 8 project names in a row).

Can you help me creating a function that allows my Previous Project and Next Project buttons to change the main cover, the href where this main cover takes you when you click on it, the title of the project and the number of the counter?

Thank you very much, and kind regards!