Pure CSS Image Slider Using Only HTML & CSS

Today, I’m going to show how to make an image slider | slideshow using html and css , No javascript , pure html & css.
If you enjoyed the video don't forget to subscribe and turn on your notifications! , Like and Comment .
Subscribe To My Channel and Get More Great Tips : / @lama-code
Download files from here : github.com/m-m...
Paypal Donation : www.paypal.me/...
Text Editor : code.visualstu...
How To Create a Profile Card Using HTML and CSS
• How To Create a Profil...
How To Create Linkedin Loader Using HTML and CSS
• How To Create Linkedin...
How To Create Transparent Login Form Using HTML and CSS
• How To Create Transpar...
How To Add Loading Animation To Website Using HTML AND CSS | CSS Loading Page Animation
• How To Add Loading Ani...
🎵 Music :
Music provided by NoCopyRightSounds.
Track1: BVRNOUT - Take It Easy (feat. Mia Vaile) [NCS Release]
Watch: • BVRNOUT - Take It Easy...
Free Download / Stream:ncs.io/TakeItEa...
Track2: Rival x Cadmium - Seasons (feat. Harley Bird) [NCS Release]
Watch: • Rival x Cadmium - Seas...
Free Download / Stream:ncs.io/SeasonsID

[@leonelmessi3010]

very useful idea. for begineers who dont have good knowledge about js but wants their project to look cool

[@aborgrio6446]

without using javascript u have make this very cool image slider, thanks bro

[@alessandrotoffanin]

⁶

[@ebostories8372]

Loved it! Just started learning HTML+CSS and couldn't find any easy to follow tutorials

[@Lama-Code]

Enjoy it 😉

[@Анастасия-ы2л5э]

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

[@bhavnanagar4589]

Very helpful, have seen so many tutorials but this one was very simple and elegant, thank you soo much

[@Lama-Code]

Thank you Bhavna Nagar

[@DeOLite]

maybe you setted img not container 100%?

[@kpujarao3601]

Hi pls tell me what is use of transition tag

[@HHcz]

I don't know how to put all of this into a container because it all gets messed up. Any help?

[@anusham2689]

thank you so much....without u i never complete my task

[@Shotbysimmons]

Thank you for this video I had a problem with my images not loading from local system. I noticed you had your images saved in the same folder as your project, when I moved mine to the project folder they worked.

[@TiffenBusson]

Hello, thank you for the video! I just wanted to know why do we have to put width:60% for the .slider? When I try in mine, there is a piece of the next picture visible, and the next pictures have pieces of the ones after them bigger and bigger each time. Thanks for the answer!

[@2eElegant-Ensemble]

My one also same problem

[@Lama-Code]

Hi guys, it's better to have images of the same size to create a slider using only HTML and CSS. Otherwise I created another tutorial where I showed how to create an image slider easily using the Swiper library so I recommend you use an external library to create this kind of slider. check this : kzbin.info/www/bejne/lXingZxqhZmgbZY

[@TiffenBusson]

@@Lama-Code thank you for your answer, but I can assure you that my pictures are all the same size, both in height and width! So I wonder what the problem could be?

[@himprittigga8207]

So very Helpful....!!! I was searching for how to use sliders in html, in vs code...and i found this- Simple and Best.... 👍😊

[@kpujarao3601]

Hi could u pls tell me what is the use of transition tag here.

[@comicghozt]

Hello. Very nice tutorial. How to make the selected image stay checked on the dots?

[@Lama-Code]

Use :checked + I did that on this video : kzbin.info/www/bejne/h3aUlKidhsyaoM0si=7fsHI5x5n5s2v5tC

[@comicghozt]

Thank you friend.

[@futurdigital]

Très intéressant, bravo Mohamed merci pour le tuto ! 💪🏻

[@Lama-Code]

Merci beaucoup Futur Digital.

[@vinaypatil6622]

my first image is aligned properly but other 3 are too much stretched why??

[@Lama-Code]

Slide images should have the same size

[@vish_9409]

Always use png extension while using any pics ...it retains the original size of the pic

[@jyotijadhav7532]

Thank u so much yar 🤗it was very helpful 🙌

[@Lama-Code]

u're welcome

[@antys_tech_cz]

hi, nice tutorial, but i cant see my images, they are "under" all on website, how can i fix it?

[@Lama-Code]

Check the description section and try to download source code of this slider. Try to resize ur images, it’s recommended to have the same size.

[@caiolins2911]

muito obrigado amigo, saudações brasileiras!

[@Lama-Code]

muito obrigado amigo

[@VIJAYKUMAR-kv8ly]

@@Lama-Code J

[@VIJAYKUMAR-kv8ly]

@@Lama-Code 7

[@aleluya_bokita]

Thanks! Me quedo genial!

[@mrsakthiofficial]

Bro one help auto mattic silder scroll transmission I can be use its is passible bro

[@Lama-Code]

Yes, u can make it automatic using css animations

[@maverickazarcon3581]

asamualaykum thank you for your informative codees

[@jorymonika94]

Nice , I love this tricks

[@panslawista]

Hi can you help me? I did this and everything works except my images in the slider overlap eachother and when they move part of them move too far to fit in the slider or not far enough so you can see part of one image and part of another. I did everything exactly the same as you except I used 6 images and not for. Could you tell me what I need to change in the code so these six images slide perfectly into the slider showing only one image?

[@Lama-Code]

try to set the images width to 100% of their container .

[@panslawista]

@@Lama-Code they are

[@rinkikhandal2896]

@@panslawista same problem I am facing, I resized the images still it's not working

[@gopichand3378]

06:27 current viewing image circle should be white to differentiate from rest of the images.

[@KultuFact]

i downloaded your file from the link in the description and i have linked them all properly but there is an issue. The image seven at 100% width don't contain the full space of the images div. Pleas confirm for by yourself and reply me. i really like your videos.

[@Lama-Code]

it’s normal,if u have a small image,it will not cover all div . So u should resize you image .

[@zgallerie787]

Your videos is good kindly also guide every tag , why you use

[@zgallerie787]

Thanku I'm waiting

[@ganesan.r5430]

why the tilde ~ 👈 what it does or why it is used .

[@ganesan.r5430]

@MOHAMED MOUROUH ok bro thank you

[@window-creative]

Akhuya bayna fik maghribi 🌝

[@Lama-Code]

Yes khouya

[@sanjidasanjida3123]

Thanks for sharing.. Wow

[@Lama-Code]

Welcome 😊

[@the_artful_touch]

tutorial is very helpful.. just one query, my slide contains grid of images, it is working fine with this code except for first slide where it shows all 3 slides combine.. can you please tell me the missing part?

[@Lama-Code]

it's better to have images of the same size.

[@aadityarajpandey5875]

what was the dimensions of your images

[@Lama-Code]

They have different sizes but I resized them with Css .

[@aadityarajpandey5875]

@@Lama-Code Thanks 👍

[@enji5942]

i need help, i used 8 images with 16:9 sizes and whenever i try to hover it in the middle the others are not sliding

[@Lama-Code]

in this video we have 4 images in your case u have 8 so u need to add more radio buttons and labels and styles them . This way u can fix this issue

[@harikaadam5411]

Is it just me or this shit not working Please help😢

[@Lama-Code]

Hi, you can get the source code of this menu from the link in the description section

[@stefanwebdev1803]

How did you made that rgb (25,12,41) color ? It was not appearing at me ....

[@Lama-Code]

you can use this hex color instead of rgb color : #190c29

[@marieluice2550]

a very good slider

[@JoeGelman]

How would you make the circle that's clicked be filled in?

[@Lama-Code]

every circle is linked with a radio button , so when you click on a circle the associated radio button gets checked, and this will allow you to fill in circle using background-color property . (e.g : #btn:checked ~ .circle{background-color:#FFFFFF ;} ) , here btn represents the radio button and circle represents the dot. I hope this helps you .

[@udayprakashharsh2805]

Great tutorial! appreciate you sharing files too :yougotthid;

[@Lama-Code]

You’re welcome.

[@telmocosta5745]

Great job, its just awesome what u can do with only html/css!!! I have 20 images, so i wanted to make it slide 4 images each time, im trying since yesterday to figure it out, but i cant manage how to do it, can u give me some help?

[@Lama-Code]

U can add them all in HTML and control them with radio buttons and css

[@telmocosta5745]

@@Lama-Code thats what i did, the only problem is that when i press the 3rd/4th/5th/6h radio button the pictures start zooming and it dont show all the 4 pictures i want, and i followed ur logic (0 -100% -200% -300% -400% -500%)

[@ledompteurdemoule3081]

Nice 😍

[@JonnakutiKiranBabuBVCE]

super bro

[@estellenysso1026]

thanks for this video! on my side the images do not slide

[@amanagarwal2024]

Can u pls share the code for this ? It's amazing

[@Lama-Code]

You can find the source code in the description section

[@zaheerkundgol8123]

please, tell me how to keep the color of white when the user has pressed a radio?

[@Lama-Code]

Hi Zaher, for this you can check when the radio button is checked and then set the background to white to the corresponding dot . Something like this : .rdBtn:checked ~ label : { background: white }

[@zaheerkundgol8123]

@@Lama-Code I suffered the whole day but, I couldn't find anyway to keep it white. Are you sure if this is going to work?

[@zaheerkundgol8123]

Can you tell me is this the exact code that I have to paste here?

[@ReubertPalabrica]

I know you might not see this comment but may I ask what were the resolutions of the images you used in the video?

[@Lama-Code]

Hi, you find them on GitHub repository. The is in the description section

[@jakubgabzdyl2695]

Hey bro, i got a problem, i have 4 pictures like u and the second one is placed on the first one, there are just 2 images on one slide, on second slide there are three images and theres part of them cut, idk what to do, any tips? i copied the code from u too to see, if its only my mistake in code or something but it does the same.

[@Lama-Code]

Try to use images with the same size or resize them with CSS.

[@outsidesympathy]

I am learning so..What is ..checked ~ m1,i don't know, can you explain me?

[@Lama-Code]

(~) This basically means that it will select all siblings after a selector.

[@thomasalexandre1014]

Hello what theme do you use please ?

[@Lama-Code]

Hello Thomas 🙌 : I am using monokai vibrant theme that I customised with some colors . You can find the steps to get the same theme I have in this respository on my github account : github.com/m-mourouh/My-Custom-Theme

[@samoli02]

Why the picture is gone after following all the steps

[@Lama-Code]

Download the code of this project then try to see where u have a problem . You can find the link to the source code in the description section,

[@adepuravali2918]

adi cheste vasta ledu naku

[@jackblacks4176]

How do we make it slide automatically please?

[@Lama-Code]

You can use CSS animation for that.

[@soumyanandan1567]

Thank you so much, but I have a question My photos are in potrait mode so can you show me the code of some potrait photos slider Thanks btw

[@Lama-Code]

You just have to change the width of the images container

[@soumyanandan1567]

Thanksss it is working now

[@antonis_mylonas]

photos must be in same size:

[@Lama-Code]

Yeah , if they havn't the same size u can resize them with css

[@wavyw997]

Thanks for the source code I managed to edit it out. Is it possibly that a video could be contributed in the slider ?

[@Lama-Code]

thank you for your comment , yes of course you can add a video in the slider

[@wavyw997]

@@Lama-Code is there a video displaying this ?

[@wavyw997]

??

[@wavyw997]

If it's a separate video please forward me a link.

[@Lama-Code]

​@@wavyw997 To display your video in the slider ,I think you should add it as you do with images , but it's a little bit different , (Sorry I have no video that shows how to make a video slider )

[@biaali4590]

❤️

[@Smiley100k]

How to center the whole slider?

[@Lama-Code]

Hi @Smiley, For this you can put your slider inside a container and then center it using either flex box or any other way like (grid system, position …). Enjoy 😉.

[@liamaiken1782]

helpful but, something not understanding

[@Lama-Code]

Great , ask me

[@TheGuyWithWifi]

3:20 mine looks nothing like yours

[@Lama-Code]

You can download the source code of this hamburger menu from the link in the description section.

[@kowsalya2740]

Bro, slider is not visible for full screen, what can i do, help me sir

[@Lama-Code]

change the width and height of images

[@Lama-Code]

Subscribefor more videos : www.youtube.com/@Lama-Code

[@tirveersingh6138]

Only Time pass

[@dineshvarmaproductions]

Mat kar bhai aesa muh se bolna seekh

[@Lama-Code]

Welcome

[@ehoy4895]

TYSM

[@SharifNoble]

can it be turned to auto slide?

[@Lama-Code]

You can use css animations for that.

[@tonytony-fc6gq]

A WASTE OF TIME, this does not work, all 4 images are showing

[@Lama-Code]

You can download the code of this image slider from the GitHub repo in the description section. Or you can download this one and replace images (github.com/m-mourouh/swiper-image-slider).

[@WajidCodes]

I am pakistani Thanks brother 😍😍😍

[@reulacto7109]

your code isn't working !! with other images !! if you are free please reply to my comment.

[@Lama-Code]

u can resize your images with css

[@lynxlecher9547]

This doesn't work either. All I want is a simple left and right gallery and all I find is these sliders that don't work.

[@Lama-Code]

You can download this project from the source code in the description section .

[@lynxlecher9547]

@@Lama-Code I decided to do it another way but thank you for letting me know. And sorry for my comment, I was frustrated.

[@CS27ZO]

Does this translate well onto smaller devices like phones?

[@Lama-Code]

u can make this responsive using css media queries

[@jashanpreetsingh1875]

very helpful.. was struck here for an hour thankuuuuuu so much

[@Lama-Code]

😉

[@danielroman1484]

My dots don’t come up in the center any tips?

[@Lama-Code]

You can center them using margin : npx auto , or with flexbox

[@rasthaykutta4924]

Thank you so much, you made my web page assigment prettier!

[@emmettroberto7195]

I guess im asking randomly but does someone know a method to log back into an instagram account..? I somehow forgot my login password. I would appreciate any help you can offer me.

[@tysondaxton3911]

@Emmett Roberto instablaster =)

[@emmettroberto7195]

@Tyson Daxton I really appreciate your reply. I got to the site through google and I'm in the hacking process now. Seems to take quite some time so I will get back to you later with my results.

[@emmettroberto7195]

@Tyson Daxton it did the trick and I now got access to my account again. I'm so happy:D Thank you so much you saved my account !

[@tysondaxton3911]

@Emmett Roberto glad I could help xD

[@hananela1673]

جميل لكن الكود ماعم ينضبط

[@Lama-Code]

ممكن تحميل كود هذا image-slider من Github , الرابط في صندوق الوصف.