Pure CSS Image Slider Using Only HTML & CSS

Подписаться 2,8 тыс.

Просмотров 165 тыс.

50% 1

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 : / @deltatycode
Download files from here :github.com/Deltaty-Code/Image...
Paypal Donation : www.paypal.me/mourouh
Text Editor : code.visualstudio.com/?wt.mc_...
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...
FACEBOOK : DeltatyCode/...
INSTAGRAM : / mouhamedmourouh
LINKEDIN : / m-mourouh
𝗚𝗜𝗧𝗛𝗨𝗕 : github.com/m-mourouh
🎵 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/TakeItEasyID
Track2: Rival x Cadmium - Seasons (feat. Harley Bird) [NCS Release]
Watch: • Rival x Cadmium - Seas...
Free Download / Stream:ncs.io/SeasonsID

Опубликовано:

22 май 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 150

@ebostories8372 Год назад

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

@DeltatyCode Год назад

Enjoy it 😉

@bhavnanagar4589 3 года назад

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

@DeltatyCode 3 года назад

Thank you Bhavna Nagar

@DeOLite 2 года назад

maybe you setted img not container 100%?

@kpujarao3601 Год назад

Hi pls tell me what is use of transition tag

@user-on8rr1fo8k 3 месяца назад

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

@aborgrio6446 4 года назад

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

@alessandrotoffanin Год назад

⁶

@anusham2689 2 года назад

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

@Shotbysimmons 2 года назад

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.

@aleluya_bokita Год назад

Thanks! Me quedo genial!

@jashanpreetsingh1875 9 месяцев назад

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

@DeltatyCode 9 месяцев назад

😉

@jorymonika94 4 года назад

Nice , I love this tricks

@futurdigital 2 года назад

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

@DeltatyCode 2 года назад

Merci beaucoup Futur Digital.

@rasthaykutta4924 3 года назад

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

@emmettroberto7195 2 года назад

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 2 года назад

@Emmett Roberto instablaster =)

@emmettroberto7195 2 года назад

@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 2 года назад

@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 2 года назад

@Emmett Roberto glad I could help xD

@marieluice2550 4 года назад

a very good slider

@jyotijadhav7532 2 года назад

Thank u so much yar 🤗it was very helpful 🙌

@DeltatyCode 2 года назад

u're welcome

@ledompteurdemoule3081 3 года назад

Nice 😍

@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.

@gopichand3378 2 года назад

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

@DeltatyCode 4 года назад

Subscribe To My Channel and Get More Great Tips : ru-vid.com/show-UCfCOsSNqcNRkiviaHH5vnrQ

@sanjidasanjida3123 3 года назад

Thanks for sharing.. Wow

@DeltatyCode 3 года назад

Welcome 😊

@maverickazarcon3581 5 месяцев назад

asamualaykum thank you for your informative codees

@user-om1rn1cd7n 7 месяцев назад

super bro

@mudassirshaikh296 Год назад

thanks Sir

@ehoy4895 Год назад

TYSM

@caiolins2911 3 года назад

muito obrigado amigo, saudações brasileiras!

@DeltatyCode 3 года назад

muito obrigado amigo

@VIJAYKUMAR-kv8ly 3 года назад

@@DeltatyCode J

@VIJAYKUMAR-kv8ly 3 года назад

@@DeltatyCode 7

@HHcz Год назад

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

@biaali4590 3 года назад

❤️

@zgallerie787 2 года назад

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

@zgallerie787 2 года назад

Thanku I'm waiting

@estellenysso1026 3 года назад

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

@WajidCodes 9 месяцев назад

I am pakistani Thanks brother 😍😍😍

@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.

@DeltatyCode Год назад

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

@king_Vladimir01 Год назад

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.

@DeltatyCode Год назад

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

@TiffenBusson 2 месяца назад

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 2 месяца назад

My one also same problem

@DeltatyCode 2 месяца назад

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 : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_GDPi4P4m74.html

@TiffenBusson 2 месяца назад

@@DeltatyCode 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?

@the_artful_touch 6 месяцев назад

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?

@DeltatyCode 2 месяца назад

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

@panslawista 2 года назад

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?

@DeltatyCode 2 года назад

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

@panslawista 2 года назад

@@DeltatyCode they are

@rinkikhandal2896 Год назад

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

@stefanwebdev1803 2 года назад

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

@DeltatyCode 2 года назад

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

@enji5942 2 года назад

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

@DeltatyCode 2 года назад

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

@user-jb3iz9qw8j 9 месяцев назад

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

@DeltatyCode 8 месяцев назад

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

@window-creative Год назад

Akhuya bayna fik maghribi 🌝

@DeltatyCode Год назад

Yes khouya

@telmocosta5745 3 года назад

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?

@DeltatyCode 3 года назад

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

@telmocosta5745 3 года назад

@@DeltatyCode 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%)

@JoeGelman 2 года назад

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

@DeltatyCode 2 года назад

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 .

@comicghozt 4 месяца назад

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

@DeltatyCode 4 месяца назад

Use :checked + I did that on this video : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-QE1cugQggjk.htmlsi=7fsHI5x5n5s2v5tC

@comicghozt 4 месяца назад

Thank you friend.

@lupinek2468 Год назад

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

@DeltatyCode Год назад

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.

@vinaypatil6622 Год назад

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

@DeltatyCode Год назад

Slide images should have the same size

@vish_9409 9 месяцев назад

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

@mrsakthiofficial Год назад

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

@DeltatyCode Год назад

Yes, u can make it automatic using css animations

@CS27ZO Год назад

Does this translate well onto smaller devices like phones?

@DeltatyCode Год назад

u can make this responsive using css media queries

@amanagarwal2024 3 года назад

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

@DeltatyCode 3 года назад

You can find the source code in the description section

@wavyw997 3 года назад

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

@DeltatyCode 3 года назад

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

@wavyw997 3 года назад

@@DeltatyCode is there a video displaying this ?

@wavyw997 3 года назад

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

@DeltatyCode 3 года назад

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

@soumyanandan1567 2 года назад

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

@DeltatyCode 2 года назад

You just have to change the width of the images container

@soumyanandan1567 2 года назад

Thanksss it is working now

@thomasalexandre1014 Год назад

Hello what theme do you use please ?

@DeltatyCode Год назад

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

@ganesan.r5430 2 года назад

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

@ganesan.r5430 2 года назад

@MOHAMED MOUROUH ok bro thank you

@danielroman1484 2 года назад

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

@DeltatyCode 2 года назад

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

@outsidesympathy 2 года назад

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

@DeltatyCode 2 года назад

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

@user-uq5zd9eh7l Месяц назад

can it be turned to auto slide?

@DeltatyCode Месяц назад

You can use css animations for that.

@zaheerkundgol8123 Год назад

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

@DeltatyCode Год назад

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 Год назад

@@DeltatyCode 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?

@aadityarajpandey5875 2 года назад

what was the dimensions of your images

@DeltatyCode 2 года назад

They have different sizes but I resized them with Css .

@aadityarajpandey5875 2 года назад

@@DeltatyCode Thanks 👍

@samoli02 2 года назад

Why the picture is gone after following all the steps

@DeltatyCode 2 года назад

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,

@jackblacks4176 9 месяцев назад

How do we make it slide automatically please?

@DeltatyCode 8 месяцев назад

You can use CSS animation for that.

@lynxlecher9547 2 года назад

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.

@DeltatyCode 2 года назад

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

@lynxlecher9547 2 года назад

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

@antonis_mylonas 3 года назад

photos must be in same size:

@DeltatyCode 3 года назад

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

@adepuravali2918 7 дней назад

adi cheste vasta ledu naku

@reulacto7109 2 года назад

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

@DeltatyCode 2 года назад

u can resize your images with css

@TheGuyWithWifi 2 года назад

3:20 mine looks nothing like yours

@DeltatyCode Год назад

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

@Smiley100k Год назад

How to center the whole slider?

@DeltatyCode Год назад

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

@DeltatyCode Год назад

Great , ask me

@kowsalya2740 3 года назад

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

@DeltatyCode 3 года назад

change the width and height of images

@hananela1673 2 года назад

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

@DeltatyCode 2 года назад

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

@tirveersingh6138 3 года назад

Only Time pass

@harikaadam5411 8 месяцев назад

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

@DeltatyCode 8 месяцев назад

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

@tonytony-fc6gq Год назад

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

@DeltatyCode Год назад

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