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