Pure CSS Image Slider Using Only HTML & CSS
ฝัง
- เผยแพร่เมื่อ 22 พ.ค. 2020
- 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
Loved it! Just started learning HTML+CSS and couldn't find any easy to follow tutorials
Enjoy it 😉
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.
Боже , огромное спасибо, сейчас учусь верстке и ваш ролик безумно помог!
Сидела над этим сама часа три не меньше, в итоге благодаря вам вопрос решился за пару минут)
without using javascript u have make this very cool image slider, thanks bro
⁶
thank you so much....without u i never complete my task
Very helpful, have seen so many tutorials but this one was very simple and elegant, thank you soo much
Thank you Bhavna Nagar
maybe you setted img not container 100%?
Hi pls tell me what is use of transition tag
Thanks! Me quedo genial!
Très intéressant, bravo Mohamed merci pour le tuto ! 💪🏻
Merci beaucoup Futur Digital.
Nice , I love this tricks
very helpful.. was struck here for an hour
thankuuuuuu so much
😉
I don't know how to put all of this into a container because it all gets messed up. Any help?
06:27 current viewing image circle should be white to differentiate from rest of the images.
Thank you so much, you made my web page assigment prettier!
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.
@Emmett Roberto instablaster =)
@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.
@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 !
@Emmett Roberto glad I could help xD
a very good slider
Nice 😍
Thank u so much yar 🤗it was very helpful 🙌
u're welcome
TYSM
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?
try to set the images width to 100% of their container .
@@DeltatyCode they are
@@panslawista same problem I am facing, I resized the images still it's not working
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!
My one also same problem
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 :
th-cam.com/video/_GDPi4P4m74/w-d-xo.html
@@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?
Subscribe To My Channel and Get More Great Tips : th-cam.com/channels/fCOsSNqcNRkiviaHH5vnrQ.html
So very Helpful....!!! I was searching for how to use sliders in html, in vs code...and i found this- Simple and Best.... 👍😊
Hi could u pls tell me what is the use of transition tag here.
asamualaykum thank you for your informative codees
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.
Try to use images with the same size or resize them with CSS.
Thanks for sharing.. Wow
Welcome 😊
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?
it's better to have images of the same size.
thanks Sir
Bro one help auto mattic silder scroll transmission I can be use its is passible bro
Yes, u can make it automatic using css animations
muito obrigado amigo, saudações brasileiras!
muito obrigado amigo
@@DeltatyCode
J
@@DeltatyCode 7
super bro
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
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
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.
it’s normal,if u have a small image,it will not cover all div .
So u should resize you image .
How did you made that rgb (25,12,41) color ? It was not appearing at me ....
you can use this hex color instead of rgb color : #190c29
my first image is aligned properly but other 3 are too much stretched why??
Slide images should have the same size
Always use png extension while using any pics ...it retains the original size of the pic
How would you make the circle that's clicked be filled in?
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 .
hi, nice tutorial, but i cant see my images, they are "under" all on website, how can i fix it?
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.
thanks for this video! on my side the images do not slide
❤️
Your videos is good kindly also guide every tag , why you use
Thanku I'm waiting
Hello. Very nice tutorial.
How to make the selected image stay checked on the dots?
Use :checked +
I did that on this video : th-cam.com/video/QE1cugQggjk/w-d-xo.htmlsi=7fsHI5x5n5s2v5tC
Thank you friend.
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?
U can add them all in HTML and control them with radio buttons and css
@@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%)
I know you might not see this comment but may I ask what were the resolutions of the images you used in the video?
Hi, you find them on GitHub repository.
The is in the description section
Does this translate well onto smaller devices like phones?
u can make this responsive using css media queries
why the tilde ~ 👈 what it does or why it is used .
@MOHAMED MOUROUH ok bro thank you
can it be turned to auto slide?
You can use css animations for that.
please, tell me how to keep the color of white when the user has pressed a radio?
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 }
@@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?
Can you tell me is this the exact code that I have to paste here?
Hello what theme do you use please ?
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
Can u pls share the code for this ? It's amazing
You can find the source code in the description section
My dots don’t come up in the center any tips?
You can center them using margin : npx auto , or with flexbox
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
You just have to change the width of the images container
Thanksss it is working now
I am learning so..What is ..checked ~ m1,i don't know, can you explain me?
(~) This basically means that it will select all siblings after a selector.
Thanks for the source code I managed to edit it out. Is it possibly that a video could be contributed in the slider ?
thank you for your comment ,
yes of course you can add a video in the slider
@@DeltatyCode is there a video displaying this ?
??
If it's a separate video please forward me a link.
@@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
)
Akhuya bayna fik maghribi 🌝
Yes khouya
I am pakistani
Thanks brother
😍😍😍
what was the dimensions of your images
They have different sizes but I resized them with Css .
@@DeltatyCode Thanks 👍
How do we make it slide automatically please?
You can use CSS animation for that.
Why the picture is gone after following all the steps
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,
How to center the whole slider?
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 😉.
photos must be in same size:
Yeah , if they havn't the same size u can resize them with css
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.
You can download this project from the source code in the description section .
@@DeltatyCode I decided to do it another way but thank you for letting me know. And sorry for my comment, I was frustrated.
adi cheste vasta ledu naku
your code isn't working !! with other images !!
if you are free please reply to my comment.
u can resize your images with css
Bro, slider is not visible for full screen, what can i do, help me sir
change the width and height of images
3:20 mine looks nothing like yours
You can download the source code of this hamburger menu from the link in the description section.
جميل لكن الكود ماعم ينضبط
ممكن تحميل كود هذا image-slider من Github , الرابط في صندوق الوصف.
helpful but, something not understanding
Great , ask me
Only Time pass
Is it just me or this shit not working
Please help😢
Hi, you can get the source code of this menu from the link in the description section
A WASTE OF TIME, this does not work, all 4 images are showing
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).
Mat kar bhai aesa muh se bolna seekh
Welcome
👎👎👎👎
Great tutorial!
appreciate you sharing files too :yougotthid;
You’re welcome.