Search code examples
javascriptsliderfullscreeninfinite

How to create an infinite fullscreen slider like this one?

I want to create an infinite fullscreen slider in Html + Css + JavaScript (Plural). I don't want to use libraries, like "Slick" or something like this. The first slide should be in the senter. I need to see half of the third block and half of the last block(example in the photo). Can anyone help, please ? Example: https://i.sstatic.net/FORxN.jpg

Solution

  • You can do a full-screen container and then place your images in it, and with a little bit of JS you can achieve it.

    Create a div and inside the div, place your images.

.container{
width: 100%;
height: 100%;

img{
width: 100%;
height: auto;

    This is for the HTML and CSS, but you can always mess around with the height and width and finalize with what suits you and for JS I'd recommend you watching this video or this video. I've previously watched'em both and they are pretty easy to understand.