Pure CSS Image Slider Using Only HTML & CSS
HTML-код
- Опубликовано: 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
Subscribe To My Channel and Get More Great Tips : ruclips.net/channel/UCfCOsSNqcNRkiviaHH5vnrQ
Loved it! Just started learning HTML+CSS and couldn't find any easy to follow tutorials
Enjoy it 😉
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
without using javascript u have make this very cool image slider, thanks bro
⁶
thank you so much....without u i never complete my task
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.
Thanks! Me quedo genial!
Боже , огромное спасибо, сейчас учусь верстке и ваш ролик безумно помог!
Сидела над этим сама часа три не меньше, в итоге благодаря вам вопрос решился за пару минут)
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?
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
06:27 current viewing image circle should be white to differentiate from rest of the images.
Nice , I love this tricks
Très intéressant, bravo Mohamed merci pour le tuto ! 💪🏻
Merci beaucoup Futur Digital.
Thank u so much yar 🤗it was very helpful 🙌
u're welcome
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 :
ruclips.net/video/_GDPi4P4m74/видео.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?
Thanks for sharing.. Wow
Welcome 😊
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.
muito obrigado amigo, saudações brasileiras!
muito obrigado amigo
@@DeltatyCode
J
@@DeltatyCode 7
Nice 😍
a very good slider
asamualaykum thank you for your informative codees
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
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.
TYSM
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
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.
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 .
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
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
thanks Sir
super bro
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 .
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 : ruclips.net/video/QE1cugQggjk/видео.htmlsi=7fsHI5x5n5s2v5tC
Thank you friend.
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
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%)
❤️
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
why the tilde ~ 👈 what it does or why it is used .
@MOHAMED MOUROUH ok bro thank you
Does this translate well onto smaller devices like phones?
u can make this responsive using css media queries
I am pakistani
Thanks brother
😍😍😍
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
)
Can u pls share the code for this ? It's amazing
You can find the source code in the description section
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
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
can it be turned to auto slide?
You can use css animations for that.
My dots don’t come up in the center any tips?
You can center them using margin : npx auto , or with flexbox
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.
what was the dimensions of your images
They have different sizes but I resized them with Css .
@@DeltatyCode Thanks 👍
Akhuya bayna fik maghribi 🌝
Yes khouya
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 😉.
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
photos must be in same size:
Yeah , if they havn't the same size u can resize them with css
جميل لكن الكود ماعم ينضبط
ممكن تحميل كود هذا image-slider من Github , الرابط في صندوق الوصف.
3:20 mine looks nothing like yours
You can download the source code of this hamburger 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).
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
Mat kar bhai aesa muh se bolna seekh
Welcome
👎👎👎👎
Great tutorial!
appreciate you sharing files too :yougotthid;
You’re welcome.