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.
@@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
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. ).
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
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>?
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
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'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.
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..
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
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?
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.
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 ❤️
![GEEK TIMË [OFFICIAL AUDIO]](http://i.ytimg.com/vi/ry-6RvkH880/mqdefault.jpg)
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
this is one of the best tutorial so far, thank you
Thanks so much for the tutorial! Exactly what I've been looking for. Works great!
Thank you! The only one who worked without a problem!
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);
}
Perfect amigo, i am from brazil, is code my save !!!!! tanksss
KEKW
You made it soo simple and easy to understand, Thank You So Much!!!!!
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.
Very good and simple code/explanation. Congratulations!
Finally a slideshow that works! Thanks
Thanks a lot. It helped me after a long day of frustration.
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?
Awesome! I have been looking for this for two weeks now, LOL!
Thank you very much. Very helpful video. Special thanks for giving the code link in description.
Wonderful. Strainght to the point
Thanks dude, your video helped me a lot ! You won a
subscribed !
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 was really helpfull!! Compared to what i watch the last time, too many talk and nonsense code adding to it-_-
Work charmingly
Thank you, it worked perfectly well!
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 🤩
now that is how we want a tutorial to be
WOW! Thank you very much! This works perfectly and the code is simple)))
Great one. It finally helped me :)
Thanks bro.........i like you video.
you saved me, thank you
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
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!!!! :)
Thank you sir it worked out for me 👍👍👍
Nice code, dude!
Tutorial is very pog
i am from brazil! thanksssssssss brow!
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;
Is there an issue with the audio portion on your video? I am not hearing anything.
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
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!
that's f'ing awesome!
Hello!!!
I am not familiarized with SCSS and I can't run your code... Is there a way to do it with CSS?
Thanks a lot it worked true.
How to make it auto slider after every 5 seconds?
does it work without the radio buttons ?
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 :)
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..
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.
You're boss, thank you !!
+subs
Niceee
Ur work is good but the ur camera need a little bit of an update
thank you!!! ;_; helped me sooooo much
How would you incorporate something like this in a grid item?
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.
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?
thanks really helpful
I copied the code exactly, but it's broken. image are placed as single images rather than vied as a slider
It's working but after putting it in my code my navbar is gone ? Putting navbar fixed isn't also helping
Hello sir how to use arrow in this tutorial
Hello sir please reply me
Great
#i1: checked~#one{
z-index: 9;
}
not working don't know why
Very nice
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.
Thanks you so much !!
Can I use this by replacing images with a contact form or some sort?
I did exactly like the video but my dotted bar appears at the top of the page instead. Can anyone help?
WOW
Thankyou it's a good tutorial
os caras são muito bruxo!
Could I use this Image Slider for my personal Website?
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
better do a video on text slider with controls as like image slider.
Thanks Alot
how would I move it automatically without javascript ?
How do I make this autoplay?
thankx . really
Really good code
Can anyone tell me,, what is the name of this codding Software,,,, plz give me download link,,
it would be easier if there was some explanation while coding.
hi, how i can use with local images in my pc?
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 ❤️
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.
Thanks
Videos with no audio creep me out
like!!!
I don't why, it isn't working for me😓
where is the code html
Which editor you using??
They're using codepen.io
PLZ GIVE ME THE CODE FAST PLZ
Sir all my images are appearing vertically
on the image container do display: flex;
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.
it's not working :(
mto bom
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