Responsive Slider Using HTML & CSS Only 

Awesome work Anna, thanku so much, it has been super useful! p.d: I noticed the left arrow wasn't working, figured out if you invert the order of the numbers like shown below it works as it's supposed to:) #slide1:checked ~ #controls label:nth-last-child(1), #slide2:checked ~ #controls label:nth-last-child(4), #slide3:checked ~ #controls label:nth-last-child(3), #slide4:checked ~ #controls label:nth-last-child(2){ background: url(Images/LeftArrow.svg) no-repeat; float: left; margin: 0 0 0 -50px; display: block; }

after watching this video i now know. i need to learn pseudo-(selectors,elements,classes) this simply deserves a nobel prize for clearing my mind

I used a modified version of this for my site. If you want to convert it to a slider that automatically cycles between the 4 slides, you need to add some javascript. Include the following in your HTML header: var autoplayInterval = 10000; var autoplayTimer = null; var autoplay = true; var newIndex = 1; if (autoplay) { autoplayTimer = setInterval(function() { newIndex++; navigateSlider(); }, autoplayInterval); } function resetSlider() { clearInterval(autoplayTimer); } function navigateSlider() { const slide1 = document.getElementById('slide1'); const slide2 = document.getElementById('slide2'); const slide3 = document.getElementById('slide3'); const slide4 = document.getElementById('slide4'); if (newIndex == 1) { slide1.checked = true; } else if (newIndex == 2) { slide2.checked = true; } else if (newIndex == 3) { slide3.checked = true; } else if (newIndex == 4) { slide4.checked = true; newIndex = 0; } } Note that the first variable (autoplayInterval) is the time between slide cycles. By default, I set it to 10 seconds. Also, you may want to add "onclick="resetSlider()"" to your bullet/control labels, so that if someone navigates through the slides, they stop auto cycling (e.g.: ). Enjoy!

Your code has literally saved my life! thank youuuu!

This is what I was looking for! Thanks, great! :D

U've got one subscriber . Great !

IMPRESSIVE! THANK YOU ANNA!

if you downloaded big arrows you have to modify the background size: #slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4), #slide4:checked ~ #controls label:nth-child(1){ background: url(right.svg) no-repeat; background-size: 50px; float:right; margin:0 -50px 0 0; display: block; }

The slider in the video is different from the slider in the source code. Theirs no side buttons.

awesome slides. done some editing on them but overall very good thank you :D

This is the best tutorial about slider.Great job!!

Thank you from a french guy.

wow nice just HTML , CSS you got it

Thats amazing 👍🤩 You've got 1 subscriber ❤🎉

Hello, I am not able to get the front and back arrows to appear onto my page. . . I have reviewed the code several times I can not see why I am having this issue. The bullets work

really interesting to watch even though I had no clue on most of what was happening. Really good results too

Hi, congratulations on the tutorial, it helped me a lot. On the 'back' button I set the numbers to nth-last-child (). I made the following change below in the css. # slide1: checked ~ #controls label: nth-last-child (1), # slide2: checked ~ #controls label: nth-last-child (4), # slide3: checked ~ #controls label: nth-last-child (3), # slide4: checked ~ #controls label: nth-last-child (2)

This is for fixed number of slides. If you have more images to display, then you have to code JavaScript to modify the style sheet

Thanks for nice slider video:)But I cant did it Visual Studio. How can i do in visual studio? It doesnt display regular, it displays as line by line as Slide 1, Slide 2 etc.

feels like I'm gonna slide to heaven

hi annablok, I want to ask, I have followed your images slide tutorial correctly but I have problems here, namely the arrow keys don't work and the image won't shift, I hope you can help me :)

This is Great!! 🤩🤩

if Arrows are not visible then use ( background-size: cover; ) property Thnxx 🙂

that song is so relax

Анна, напишите пожалуйста, что за музыка играет в начале видео)

Thanks for the tutorial and code.

Which technology or libraries used in js bro? Whether it is native js or not?

А зачем там стрелка назад если она не работает нормально? Смотрел на codepen

Why is the back arrow not working? it only works from the third point to the first, and vice versa

subbed, very helpful. Thanks

Это всегда очень круто, когда подобное сделано на чистом CSS. Только вот, жаль, что в реальном проекте 99% вероятности, что никто никогда подобное не применит. Т.к. гораздо удобнее будет slick\owl. Но как концепт - да, это шикарно)

How can i create a second slider from this on same page, if i copy it and change some code, it works but you can't see the arrows for navigation neither bullets, HELP!!!!

thanks for sharing this!

Thanks for this, help me very much!

How do I do if I want to add a fifth element to the slider?

Solved my problem. Thanks a lot

you are a freaking legend

when i put it to mobile view all the text overlaps and crams together. it also wont add the second line

left arrow doesn't work properly.

в сss если поменять цирфры то будет норм перелистывать назад #slide1:checked ~ #controls label:nth-last-child(1), #slide2:checked ~ #controls label:nth-last-child(4), #slide3:checked ~ #controls label:nth-last-child(3), #slide4:checked ~ #controls label:nth-last-child(2)

Saludos! Gracias por el aporte hay unos errores en el código que encontré por si otra persona le pasa lo mismo, el primero es en la clase .inner pusiste un line-height: 0; hay que quitarlo porque eso hace que los párrafos que pongas con mas texto se vea uno encima de otro y no se aprecia bien y estas usando en el html una clase slide-content, pero en CSS, no la modificas lo cual se puede eliminar sin problemas en el html .

Прямо магия какая то 👏 , тоже так хочу ✨😀✨

The music sounds like a more ambient version of Mice on Venus from Minecraft lol.

Thanks, its awesome

Ваш контент прекрасен, почему у Вас так мало подсчиков остаётся загадкой.

please how to implement an automatic photo pass on this system?

Awesome 👌💯

Muchas gracias quedo hermoso ¡

Great work!

How change slider position. I mean top:56% or right:5% I tried it, but it didn't work

hi. its nice work.

Anna, that was genius - perfect! I'm using it. Except, the back button does not seem to work. Will look at it later. For not it's just perfect! Thanks.

What is the name of the music playing in the background?

Genial!!!

Прошу прощения, но текст в тэге текст накладывается друг на друга когда выходит за пределы указанной ширины. Как это можно исправить?

Thank you.

When inputting the svg icon to get the clickable arrow in the css, it will not pop out with anything... I am trying to use an alternative svg icon from another source too but it still won't show... any ideas why that's the case?

dimension of pics in slider pls

thanks alot work for me

Damn i just watched the trailer I'll do it when am finish my school.

Thanks !!

how do i link this to my html code in visual studio?

Как раз что искал. Спасибо

Left arrow key does not work properly, if you have time please check it and update as soon as possible

Спасибо, дорогая

Hi thanks for this it was very helpful! I just have one issue, I copied and pasted the code from codepen but for some reason, my text from h2 and p are overlapping does anyone know how to fix it?

thank you sir

как всегда всё супер

back button not working for second slide in this video

ty so much mam

Спасибо.

how can i made the slider move by it self

thank a lot

there's something wrong with the left arrow button

How to add more slides???

its preatty good but the back button doesnt work

how can I make the same carousel of 7 slides?can anyone help me

help the icon does not appear for me

How to attach lazy load on this slider

Can you tell me pixal size in photo ?

спасибо

thanks :D

Is it responsive?

this isnt working in responsive the left arrow isnt showing

excelente ... Hay manera de que sea automático?

gelek spas mamoste

nice video !

Does anybody know how to put it into autotomatic slider? Like every 4sec it will change to next slide. Thank you very much

Left arrow not working properly

Thanks Anna

Thanks for the video, it would be useful to get the back slider working, can you help?

Hi guys, I find it pretty difficult to add a new slide, could you please help me?

la flecha de la izquierda esta dañada

un saludo desde elhabal

воу, не думал что такое можно на пюрешном хтмл и цсс сделать

does anyone has any idea how to add new slides to this?

i am not getting the side buttons < likes >

will this code work in visual studio code @Anna Blok

how to write symbol next to (#slide1:checked)?

Music intro?