I added the JS code and nothing happened, in the code htlm you did not make any function call. In my case I just added the JS in the local what kind of function call do I add in the html, after adding the JS ??
Ignore the message! I already got kkkk now a little haha, it was because I had changed the input addresses (# i1) to (# t1) kkkkk I did not pay attention to the address specified in JS, but now it worked, great code, good work!
and how to add when hover, it pause ? (and add radio buttons for keyboard navigation)- only left right. and in html use the vw in conbination with lazy load to prevent screen moves up down when pic load it ( any better lazy load than lozad.js ? + how lozad.js load 0.5 sec before it show ?) need to learn js i know..
hi , i visited the link there is a image slide but the css is scss can you suggest some codepen for slider with postcss , i havent learnt till yet how to covert scss.:)
If you like, you can put that when the i are checked, each label dot lights up, like this: #i1:checked ~ .nav #dot1{ background-color: white; } #i2:checked ~ .nav #dot2{ background-color: white; } #i3:checked ~ .nav #dot3{ background-color: white; } You can also make the arrows appear, like so: .pre, .nxt{ width: 9%; height: 16%; position: absolute; top: 50%; z-index: 99; cursor: pointer; border: solid black; border-width: 0 5px 5px 0; } .pre{ left: 3%; transform: translateY(-50%) rotate(135deg); } .nxt{ right: 3%; transform: translateY(-50%) rotate(-45deg); }
Thanks man. You made it possible for me to get the project done. I am kind of struggling a bit understanding the z-index: -1 and 9 for the checked values though.
I added "class='buttons'" to each radio button so that my CSS is just ".buttons {display: none}" instead of #id1, #id2, #id3, #id4, #id5 {display: none}. This allows a dynamic number of slides/images without changing the CSS. I also used display:flex to center the next/previous arrows (in your CodePen) both horizontally and vertically.
This is lighter than any plugin but functionality of CSS slider is limited ( like:- it's difficult to add auto slide and control both in one slider. ).
@@pedrocosta9769 não. É só fazer igual o vídeo que dá bom. Só têm que tomar cuidado pq, cada slide é uma URL diferente. Eu estava fazendo bem rápido, e não prestei atenção nisso. Reveja o conceito do código e do vídeo que vc tbm faz
Hey man I loved your tutorial.. But, I got a question.. How do I add keyboard navigation to this, so that I can navigate the slider with the left and right arrow keys??
i have a problem i have tried 3 different variants of doing slide show and i cant do that i copied this code and the img are not in cointainer they are above each other i open with google chrome why>?
With tilda (~) you can select siblings, not only sibling right next to the element when you use it (like + selector do), but the all elements on the same level. I think. no red ... red ... red div:hover ~ p { color: red; } So for example, when you hover element, elements on the same level like that will get color red, but not and the in . Also, you notice that el. are not first siblings, i mean they are not sit right next to . Sorry for my english
It's not working, it's just displaying a dummy slider template, but the navigation is not working, neither the side navigation, nor radio navigation both are just dummy template and are not navigating through the way you showed. What could be the reason
I am trying to add arrows on the left and rigt side of the slider but evnen though the arrows Z-index is lower than the navigations Z-index, the surface above the arrows is not clickable. Do you have any idea what could cause this problem? bedst regards
HI! Your Video is really helpful!! But what if I have 12 id tags? What would be my z-index? I don't understand why did you come up with 9 if the #one is checked... Pleaseeee answerrr..
I'm having some trouble with the previous and next labels. They're not working propperly. Pretty much every "next" label takes me to i1, and every "previous" label to i4. I'm pretty sure I got the code the same as you do, so I'm not really sure why is it failing.
I recreated the code in the video in brackets. The output I got was the images with elongated circles in the middle that I can click to change the image. But it looked nothing like the end result in the video. I was confused by what was being shown in my browser since the code was copied. So I decided to go to the codepen link and copy and paste the code into brackets. The result was just the images on the page without any styling. So I decided to make my own codepen account and copy and paste the code from the codepen link to see if on my codepen account it would look the same. It doesn't. It just had the images and no styling. Could someone explain why the results turn out different despite the same code?
I'm having some problem with the buttons cause it's not showing, I'm using brackets btw.. does anyone know how to fix this? Edit: I redid it and it works! There must have been a code i didn't input correctly, thank u thank sooo much again ❤️
Dear Sir, image slider is working fine on pc site but slider not showing on mobile. plz share code to add so that slider should show on mobile. plz guide me. Thanx Sir.
We can move image automatic by using small JavaScript on code.
follow the link for JS :
codepen.io/mayurbirle/pen/ppqRoZ?editors=0010
I added the JS code and nothing happened, in the code htlm you did not make any function call. In my case I just added the JS in the local what kind of function call do I add in the html, after adding the JS ??
Ignore the message! I already got kkkk now a little haha, it was because I had changed the input addresses (# i1) to (# t1) kkkkk I did not pay attention to the address specified in JS, but now it worked, great code, good work!
and how to add when hover, it pause ?
(and add radio buttons for keyboard navigation)- only left right.
and in html use the vw in conbination with lazy load to prevent screen moves up down when pic load it ( any better lazy load than lozad.js ? + how lozad.js load 0.5 sec before it show ?) need to learn js i know..
hi , i visited the link there is a image slide but the css is scss can you suggest some codepen for slider with postcss , i havent learnt till yet how to covert scss.:)
Nice job! Many channels make so much noise in the vid with annoying intro, etc etc.. you made it clear and simple, well done .. +1 sub
Works Perfect! It was racking my brain for 2 days trying to find a good slider for my website that didn't use Javascript! Thanks
it's doesn't work at all for me
If you like, you can put that when the i are checked, each label dot lights up, like this:
#i1:checked ~ .nav #dot1{
background-color: white;
}
#i2:checked ~ .nav #dot2{
background-color: white;
}
#i3:checked ~ .nav #dot3{
background-color: white;
}
You can also make the arrows appear, like so:
.pre, .nxt{
width: 9%;
height: 16%;
position: absolute;
top: 50%;
z-index: 99;
cursor: pointer;
border: solid black;
border-width: 0 5px 5px 0;
}
.pre{
left: 3%;
transform: translateY(-50%) rotate(135deg);
}
.nxt{
right: 3%;
transform: translateY(-50%) rotate(-45deg);
}
Thanks man. You made it possible for me to get the project done. I am kind of struggling a bit understanding the z-index: -1 and 9 for the checked values though.
I added "class='buttons'" to each radio button so that my CSS is just ".buttons {display: none}" instead of #id1, #id2, #id3, #id4, #id5 {display: none}. This allows a dynamic number of slides/images without changing the CSS.
I also used display:flex to center the next/previous arrows (in your CodePen) both horizontally and vertically.
Could you help me with this please?
this is one of the best tutorial so far, thank you
You made it soo simple and easy to understand, Thank You So Much!!!!!
Thanks so much for the tutorial! Exactly what I've been looking for. Works great!
Perfect amigo, i am from brazil, is code my save !!!!! tanksss
KEKW
Wonderful. Strainght to the point
Thank you! The only one who worked without a problem!
Very good and simple code/explanation. Congratulations!
Thanks a lot. It helped me after a long day of frustration.
Thank you very much. Very helpful video. Special thanks for giving the code link in description.
Work charmingly
Finally a slideshow that works! Thanks
Awesome! I have been looking for this for two weeks now, LOL!
Thank you!!!! It was really helpfull!! Compared to what i watch the last time, too many talk and nonsense code adding to it-_-
Tutorial is very pog
Thanks bro.........i like you video.
Thanks dude, your video helped me a lot ! You won a
subscribed !
That is pretty cool. Is this lighter for a browser compared if you use JavaScript?
This is lighter than any plugin but functionality of CSS slider is limited ( like:- it's difficult to add auto slide and control both in one slider. ).
anyway to make this you have to be guru ! nice job mate!
Awesome finally learned 🤩
Great
The best tutorial for image slider!! ghad thank you soooo much for your vid, it really helped a lot thank you ^_^
Works Perfect! your video helped me a lot ! You won a
subscribed !
thx
Finalmente um slide show que funciona ! Excelente vídeo
Pode me ajudar? Como eu uso o código? Salvo os códigos mas nao funciona. Preciso importar alguma coisa?
@@pedrocosta9769 não. É só fazer igual o vídeo que dá bom. Só têm que tomar cuidado pq, cada slide é uma URL diferente. Eu estava fazendo bem rápido, e não prestei atenção nisso. Reveja o conceito do código e do vídeo que vc tbm faz
@@pedrocosta9769 qualquer coisa, eu importei ele no meu Github tbm
@@FAKENUM83R Obrigado por responder, pode me passar o link do seu código?
@@pedrocosta9769 Github.com/mlmauriciolopes
Thank you, it worked perfectly well!
WOW
Very nice
Hey man I loved your tutorial..
But, I got a question..
How do I add keyboard navigation to this, so that I can navigate the slider with the left and right arrow keys??
You can use radio buttons, they support keyboard arrows navigation.
Super!
you saved me, thank you
i am from brazil! thanksssssssss brow!
os caras são muito bruxo!
now that is how we want a tutorial to be
thanks really helpful
Thanks Alot
+subs
Niceee
Thank you sir it worked out for me 👍👍👍
Thanks
i have a problem
i have tried 3 different variants of doing slide show
and i cant do that
i copied this code
and the img are not in cointainer
they are above each other
i open with google chrome
why>?
Maybe need position:absolute;
Thanks a lot it worked true.
does it work without the radio buttons ?
that's f'ing awesome!
thankx . really
very nice! Is there a way to not stretch the images if they are not all the same proportions?
Check out Canva.com for easy photo editing, file type changes, and re-sizing/cropping.
tanks!!!! :)
Thanks you so much !!
Is there an issue with the audio portion on your video? I am not hearing anything.
You're boss, thank you !!
Great one. It finally helped me :)
Thankyou it's a good tutorial
I can't understand what this symbol ~ means, could someone help me ? please!!!
With tilda (~) you can select siblings, not only sibling right next to the element when you use it (like + selector do), but the all elements on the same level. I think.
no red
...
red
...
red
div:hover ~ p { color: red; }
So for example, when you hover element, elements on the same level like that will get color red, but not and the in . Also, you notice that el. are not first siblings, i mean they are not sit right next to .
Sorry for my english
@@m.art.a I'm not native, but in my opinion you're English is perfect, I could understand perfectly, so thanks.
@@alexblue8524 Hhh, not great not terrible. Im glad you understood.
It's not working, it's just displaying a dummy slider template, but the navigation is not working, neither the side navigation, nor radio navigation both are just dummy template and are not navigating through the way you showed. What could be the reason
Hello!!!
I am not familiarized with SCSS and I can't run your code... Is there a way to do it with CSS?
Can you please make this silder autoplay by using JQUERY? And please explain the concept of making it autoplay as you did in the video above.
I am trying to add arrows on the left and rigt side of the slider but evnen though the arrows Z-index is lower than the navigations Z-index, the surface above the arrows is not clickable. Do you have any idea what could cause this problem?
bedst regards
Nice code, dude!
Ur work is good but the ur camera need a little bit of an update
HI! Your Video is really helpful!! But what if I have 12 id tags? What would be my z-index? I don't understand why did you come up with 9 if the #one is checked... Pleaseeee answerrr..
Really good code
How would you incorporate something like this in a grid item?
I copied the code exactly, but it's broken. image are placed as single images rather than vied as a slider
thank you!!! ;_; helped me sooooo much
It's working but after putting it in my code my navbar is gone ? Putting navbar fixed isn't also helping
Can I use this by replacing images with a contact form or some sort?
How to make it auto slider after every 5 seconds?
WOW! Thank you very much! This works perfectly and the code is simple)))
I'm having some trouble with the previous and next labels. They're not working propperly. Pretty much every "next" label takes me to i1, and every "previous" label to i4. I'm pretty sure I got the code the same as you do, so I'm not really sure why is it failing.
okay, can you give me a link of your code? So I check it.
@@webdecorator6614 That's perfect! Thanks a lot :)
I recreated the code in the video in brackets. The output I got was the images with elongated circles in the middle that I can click to change the image. But it looked nothing like the end result in the video.
I was confused by what was being shown in my browser since the code was copied. So I decided to go to the codepen link and copy and paste the code into brackets. The result was just the images on the page without any styling. So I decided to make my own codepen account and copy and paste the code from the codepen link to see if on my codepen account it would look the same. It doesn't. It just had the images and no styling. Could someone explain why the results turn out different despite the same code?
I'm having some problem with the buttons cause it's not showing, I'm using brackets btw.. does anyone know how to fix this?
Edit: I redid it and it works! There must have been a code i didn't input correctly, thank u thank sooo much again ❤️
#i1: checked~#one{
z-index: 9;
}
not working don't know why
like!!!
Hello sir how to use arrow in this tutorial
Hello sir please reply me
Dear Sir,
image slider is working fine on pc site but slider not showing on mobile.
plz share code to add so that slider should show on mobile.
plz guide me.
Thanx Sir.
better do a video on text slider with controls as like image slider.
I did exactly like the video but my dotted bar appears at the top of the page instead. Can anyone help?
Could I use this Image Slider for my personal Website?
how would I move it automatically without javascript ?
It's so honoured
I wanna know which editor do you use
To see the output on the right of code
Its codePen , google it and go on 1st link
Which editor you using??
They're using codepen.io
mto bom
Videos with no audio creep me out
it would be easier if there was some explanation while coding.
How you reduce videos size which software you use
I am not using any special software to compress video, YT uses there own algorithm to compress the videos sizes.
hi, how i can use with local images in my pc?
How do I make this autoplay?
I don't why, it isn't working for me😓
Can anyone tell me,, what is the name of this codding Software,,,, plz give me download link,,
Thank you very much for the contribution, I need some help with the creation of a page like Slides.com, if you have any input I would appreciate it.
where is the code html
PLZ GIVE ME THE CODE FAST PLZ
Sir all my images are appearing vertically
on the image container do display: flex;
it's not working :(
how to add keyframe autoplay? :-(
u need javascript for that. in this video only used css3. that's why it cant autoplay
How to make it move itself
Check the JS of this PEN
codepen.io/mayurbirle/pen/ppqRoZ?editors=0010
Sound ni
it is useless, one image remains under the other and does nothing.
Thanks