Responsive Slider Using HTML & CSS Only

[@dabelef]

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; }

[@luonggg7985]

thank you so much

[@sanjeevd6872]

Neenga Tamil ah

[@pytonbengalski9970]

thank you

[@JoaoPaulo-ox6pr]

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

[@etherealgem1682]

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!

[@andrericardo9660]

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)

[@hazretiFrat]

thanks

[@dullestimp3475]

Thank you!

[@stevebrzezinski3392]

Thank You

[@erickchavez4551]

I spent hours trying to figure out what I had done wrong. Thanks so much!

[@lennartv.1529]

@@erickchavez4551 Where do I have to edit it? I dont get it

[@montserrataguilar8055]

Your code has literally saved my life! thank youuuu!

[@locorocojack]

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; }

[@Phillink]

Thank you! I was looking for someone who had the same problem...

[@isaaclopez7065]

thank you my friend it was very helpful

[@switbeee1364]

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

[@hezbonotieno6130]

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

[@ajdinpipo08]

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

[@AnnaBlok]

Tnx!

[@yersiniaP]

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

[@koffiemmanuelngou]

U've got one subscriber . Great !

[@Axelniraj]

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

[@MrFreeedman]

в с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)

[@orlandog1979]

or... #slide4:checked ~ #controls label:nth-last-child(2), #slide3:checked ~ #controls label:nth-last-child(3), #slide2:checked ~ #controls label:nth-last-child(4), #slide1:checked ~ #controls label:nth-last-child(1)

[@abdelaesus6678]

IMPRESSIVE! THANK YOU ANNA!

[@AprilSky]

feels like I'm gonna slide to heaven

[@alialhusseini2650]

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

[@NinjaBlade0822]

that song is so relax

[@anupkumar2736]

left arrow doesn't work properly.

[@muhammad_zohaib936]

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

[@MyGeorge1964]

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.

[@MsPeepingTallulah]

did you every solve the problem of the back slider?

[@andrericardo9660]

Hello, I posted a comment with the solution I used. 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)

[@xs1089]

@@andrericardo9660 Yeah!! It's work!

[@21398403]

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 .

[@davidcastaneda4546]

muchas gracias se que te esforzaste

[@HERMIGNIES]

Thank you from a french guy.

[@nickspringer5755]

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

[@blink182lives100]

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

[@kreeytiv-one]

wow nice just HTML , CSS you got it

[@peterkovinski8476]

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

[@danishirshad8831]

How? '

[@victoralmcrespo7310]

its preatty good but the back button doesnt work

[@1001-w5q]

It does but in not a proper way :D

[@xx8262]

@@1001-w5q #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(image.flaticon.com/icons/svg/130/130882.svg) no-repeat; float:left; margin: 0 0 0 -50px; display: block; } this is what you should change to make it work right

[@PedroGualandi]

@@xx8262 thanks! the fix worked perfectly here

[@shubhamkapadia6337]

This is Great!! 🤩🤩

[@sematv121]

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

[@WindchesterWebDev]

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

[@ВадимМоскалёв-ж7б]

Slick\Owl, который зависим от jquery, наес

[@WindchesterWebDev]

@@ВадимМоскалёв-ж7б и что?) Чем так плох jQuery? Может, это и не самый производительный инструмент, но в удобстве и количестве библиотек его пока никто не смог обойти.

[@mifodiyshtulh8151]

нууу стрелку назад я сделал рабочей (автор забил болт, что она не пашет) осталось одно НО, у меня стрелки невидимые....

[@vip.ted100]

ошибаешься мой друг, вот мне и понадобился слайдер без джава скрипта )

[@WindchesterWebDev]

тот самый 1%)

[@triohmscorporation79]

Thanks for the tutorial and code.

[@PahugerPuruhitaBaiq]

thanks for sharing this!

[@idontwhy3132]

subbed, very helpful. Thanks

[@masdetektivetv3504]

Thanks, its awesome

[@davingrahadi3525]

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 :)

[@cansuaydogan1493]

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.

[@alfredliew5062]

you are a freaking legend

[@rishisharma8596]

thank you sir

[@thescribblersdiary]

Solved my problem. Thanks a lot

[@azeuniverse3737]

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

[@Joker-zv8nb]

Thanks for this, help me very much!

[@PedroGualandi]

Great work!

[@AnnaBlok]

Thx!

[@laggron2412]

thank a lot

[@_cruzito.x]

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

[@Elisha_GG]

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

[@kaiodias5474]

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

[@AjayKumar-gg4ds]

Awesome 👌💯

[@ithielragnaros]

Muchas gracias quedo hermoso ¡

[@keirembathoungamm1935]

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

[@nobodysperfect29]

For the left arrow try this: #slide1:checked ~ #controls label:nth-last-child(4), #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(image.flaticon.com/icons/svg/130/130882.svg) no-repeat; float:left; margin: 0 0 0 -50px; display: block; }

[@anishchristopius5502]

@@nobodysperfect29 thanks bud !!

[@fredyrojas7720]

Genial!!!

[@muhammadrifqy24]

there's something wrong with the left arrow button

[@sulemanali8542]

thanks alot work for me

[@AbduRahmanTPLP]

What song for this Video? So relax

[@fhxhnddhmcegvjdthk]

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

[@thotanagaraju7871]

i am not getting the side buttons < likes >

[@alejootorres3820]

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

[@pavlekaranovic7220]

dimension of pics in slider pls

[@Shopwithkhushi]

How can I put image in background!?

[@haiangtran2036]

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

[@sergaft3295]

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

[@AmitGupta-rt2gp]

Thank you.

[@apuiftekhar8214]

hi. its nice work.

[@Vladimir905]

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

[@raghavkumar9485]

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!!!!

[@CreativeAnujkumar]

Thanks Anna

[@AnnaBlok]

😊

[@dreiigHiveSGClips]

this isnt working in responsive the left arrow isnt showing

[@acquy2279]

nice video !

[@AnnaBlok]

🤗

[@carcar5479]

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

[@hugocangi6214]

gracias mañana lo hago

[@febrikurniawan7276]

thanks :D

[@casterbeat]

Thanks !!

[@aleksandrsrudkevics6384]

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

[@shaswat18]

back button not working for second slide in this video

[@MsPeepingTallulah]

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

[@ida4095]

i managed to fix it, just change this part like so: #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(image.flaticon.com/icons/svg/271/271220.svg) no-repeat; float: left; margin: 0 0 0 -50px; display: block; } the sequence was wrong

[@luxarmiger5729]

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

[@enterkvas]

Левая стрелка не работает. Что-то там не то.

[@elzenhaikal393]

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

[@stanleymakhuza9419]

I'm not sure if this would work but try this: For both the HTML and CSS files as an example where it says 'slide1' till the last slide which in this video would be 'slide4' and slide slide_1 div tags in the HTML and the CSS elements. Just copy and paste the last one which would be eg. like this and the CSS elements too. This was something I was just editing After that, you you rename the one that you just pasted to slide_5 (and you can do more eg 6+ if you want) Note you have to do it on all the div tags and CSS elements that end with slide4 and slide_4 for it to work from the input tags till the end. Basically you just copy paste and rename... I have tried to explain this the simplest way possible. Sorry if this sounds too complicated. Hope it possibly helps

[@hassanch5866]

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

[@saitanuja2888]

Is it responsive?

[@nagaraj2958]

Left arrow not working properly

[@alaeen2675]

how can i made the slider move by it self

[@JansenCCruz]

help the icon does not appear for me

[@TDmitry412]

Спасибо.

[@shaswat18]

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

[@aibartolegenov7784]

How to add more slides???

[@Vickysong1625]

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?

[@Axelniraj]

use background-size: cover; the icon size is too large to visible properly

[@angelopincas3418]

how can I change the color to picture?

[@marcoricello7059]

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

[@aibartolegenov7784]

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

[@krossvayz6500]

Здраствуй. Нашел решения ?

[@yuliuspranata15]

ty so much mam

[@jitendraprajapat6892]

How to attach lazy load on this slider

[@ale_3g230]

спасибо

[@katiejenningson8569]

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?

[@clevyn3341]

Use line height or give margin

[@suchidoodles]

Can you tell me pixal size in photo ?

[@emirsaherden9716]

gelek spas mamoste

[@myas2009]

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

[@AnnaBlok]

tal vez si conectas una animación, pero no será un método flexible

[@gio2156]

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

[@filipmachala7570]

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

[@etherealgem1682]

Look at my comment. :)

[@gogutans]

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

[@AnnaBlok]

What problems?

[@gogutans]

@@AnnaBlok could you plase make an update with 8slides? I am trying to add new slides and I cant figure out how

[@jordandesigns5797]

@@gogutans @anna blok I have to make a slide without JS for my site but need more than 4 slides, please help

[@aibartolegenov7784]

Same problem, if you have solution may you please write

[@pipsys1165]

Were you able to solve this problem?

[@imatecnologia9155]

un saludo desde elhabal

[@soon3426]

Music intro?