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