Боже , огромное спасибо, сейчас учусь верстке и ваш ролик безумно помог! Сидела над этим сама часа три не меньше, в итоге благодаря вам вопрос решился за пару минут)
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!
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
@@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?
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.
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.
@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.
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?
I had the same problem and ended up making the container size smaller to 30% and it fixed the issue. May have to play with different container sizes depending on your photos. I belief the photos used are very large. I was limited in how large the photos I could use as it is for a school assignment and the hosting platform assigned has limitations on file size and thus I had to use much smaller photos and ended up with your same problem. Resizing the container width fixed the issue for me.
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.
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?
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.
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
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 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 }
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 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%)
@@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 )
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 😉.
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).
very useful idea. for begineers who dont have good knowledge about js but wants their project to look cool
without using javascript u have make this very cool image slider, thanks bro
⁶
very helpful.. was struck here for an hour
thankuuuuuu so much
😉
Боже , огромное спасибо, сейчас учусь верстке и ваш ролик безумно помог!
Сидела над этим сама часа три не меньше, в итоге благодаря вам вопрос решился за пару минут)
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
thank you so much....without u i never complete my task
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.
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!
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
@@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?
asamualaykum thank you for your informative codees
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.
Thank u so much yar 🤗it was very helpful 🙌
u're welcome
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
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 .
@@Lama-Code they are
@@panslawista same problem I am facing, I resized the images still it's not working
I had the same problem and ended up making the container size smaller to 30% and it fixed the issue. May have to play with different container sizes depending on your photos. I belief the photos used are very large. I was limited in how large the photos I could use as it is for a school assignment and the hosting platform assigned has limitations on file size and thus I had to use much smaller photos and ended up with your same problem. Resizing the container width fixed the issue for me.
The picture I need it fullscreen is there a way?
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
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.
Subscribefor more videos : www.youtube.com/@Lama-Code
Nice , I love this tricks
I am pakistani
Thanks brother
😍😍😍
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
May I ask can you fullscreen that
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 .
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.
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.
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
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
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.
Thanks! Me quedo genial!
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.
Your videos is good kindly also guide every tag , why you use
Thanku I'm waiting
Très intéressant, bravo Mohamed merci pour le tuto ! 💪🏻
Merci beaucoup Futur Digital.
TYSM
super bro
what was the dimensions of your images
They have different sizes but I resized them with Css .
@@Lama-Code Thanks 👍
Does this translate well onto smaller devices like phones?
u can make this responsive using css media queries
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
muito obrigado amigo, saudações brasileiras!
muito obrigado amigo
@@Lama-Code
J
@@Lama-Code 7
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
Akhuya bayna fik maghribi 🌝
Yes khouya
Great tutorial!
appreciate you sharing files too :yougotthid;
You’re welcome.
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 .
why the tilde ~ 👈 what it does or why it is used .
@MOHAMED MOUROUH ok bro thank you
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 }
@@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?
Can you tell me is this the exact code that I have to paste here?
a very good slider
Nice 😍
My dots don’t come up in the center any tips?
You can center them using margin : npx auto , or with flexbox
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
@@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%)
can it be turned to auto slide?
You can use css animations for that.
Can u pls share the code for this ? It's amazing
You can find the source code in the description section
thanks for this video! on my side the images do not slide
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
@@Lama-Code 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
)
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
How do we make it slide automatically please?
You can use CSS animation for that.
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.
3:20 mine looks nothing like yours
You can download the source code of this hamburger menu from the link in the description section.
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,
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 .
@@Lama-Code I decided to do it another way but thank you for letting me know. And sorry for my comment, I was frustrated.
How to set this automatic ?
You can use animation, but it is old school , use swipes.js instead
Creative Image Slider Using HTML, CSS & Javascript | SwiperJS Tutorial
ruclips.net/video/_GDPi4P4m74/видео.html
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
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
adi cheste vasta ledu naku
helpful but, something not understanding
Great , ask me
❤️
جميل لكن الكود ماعم ينضبط
ممكن تحميل كود هذا image-slider من Github , الرابط في صندوق الوصف.
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).
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
Only Time pass
urdu me he bol lay english ki samaj nhi arhi ap ki
Mat kar bhai aesa muh se bolna seekh
Welcome