Creating an image slider

Hi guys,

I would really appreciate it if someone could help me out!! I have been trying to replicate the website of a local pub just as a fun project for me to practise on but I have been stuck on trying to create an image slider all week and I keep hitting brick walls with it.

I have tried multiple different sources of info / webpages / youtube tutorials but I just don’t know why they aren’t working - they often just come off really funny and they certainly do not work. I don’t usually like copying someones work off youtube because there are all sorts of reasons why it doesn’t directly work in one project to another but I have no idea how to go about this.

Here is the link to my codepen project so far:

Here is the link to the pub website I am trying to replicate, so you can see the slider I am trying to create:

I am happy to use a bit of javacript with this, I am still trying to get my head around JS but I understand the jist of it and I think project based work is the best way to learn.

ANY help / pointers / tips or advice in the right direction would be extremely welcome, thank you for your time!


Hey Adam, In w3schools, they have a tutorial on how to make a slide show and whenever I jump into this situation, their code is quite helpful.
Try this link w3schools SlideShow
Hope it goes well!

Hi Marjunior

Thanks for your response

I have applied the content from w3schools and it has started to take shape a little bit now, the images are all showing at the same time though and the animation obviously doesn’t work as a result.

Do you have any idea why this is?