We can move image automatic by using small JavaScript on code. follow the link for JS : codepen.io/mayurbirle/pen/ppqRoZ?editors=0010
@junioraraujo7966
6 жыл бұрын
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 ??
@junioraraujo7966
6 жыл бұрын
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!
@playmatee1
5 жыл бұрын
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..
@pratikjadhav1154
5 жыл бұрын
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.:)
@rodhash
4 жыл бұрын
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
@JasmineMarieBushell
6 жыл бұрын
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
@glygn
5 жыл бұрын
it's doesn't work at all for me
@mp-bass
2 жыл бұрын
this is one of the best tutorial so far, thank you
@nishchayamanandhar5173
5 жыл бұрын
You made it soo simple and easy to understand, Thank You So Much!!!!!
@lparanhos
4 жыл бұрын
Thank you! The only one who worked without a problem!
@AlexandrePedroza
6 жыл бұрын
Very good and simple code/explanation. Congratulations!
@nowalijka
4 жыл бұрын
Thanks so much for the tutorial! Exactly what I've been looking for. Works great!
@GRANdisimooo
Жыл бұрын
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); }
@kaaviyam2710
8 ай бұрын
Wonderful. Strainght to the point
@abimaelyisrael858
6 жыл бұрын
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.
@TecnologiaRadioativa
6 жыл бұрын
Perfect amigo, i am from brazil, is code my save !!!!! tanksss
@PihFrags
3 жыл бұрын
KEKW
@syberiaok
4 жыл бұрын
Thanks a lot. It helped me after a long day of frustration.
@MangaMonster118
6 жыл бұрын
Finally a slideshow that works! Thanks
@andrerothweiler9191
7 жыл бұрын
That is pretty cool. Is this lighter for a browser compared if you use JavaScript?
@webdecorator6614
7 жыл бұрын
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. ).
@andrerothweiler9191
7 жыл бұрын
anyway to make this you have to be guru ! nice job mate!
@DavidNitzscheBell
6 жыл бұрын
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.
@idasgaard2681
4 жыл бұрын
Could you help me with this please?
@owaisahmad6613
6 жыл бұрын
Thank you very much. Very helpful video. Special thanks for giving the code link in description.
@owner2303
6 жыл бұрын
Awesome! I have been looking for this for two weeks now, LOL!
@francogonzalez8971
5 жыл бұрын
Thanks dude, your video helped me a lot ! You won a subscribed !
@bachhaoly7761
6 жыл бұрын
Work charmingly
@ajrizaldo4204
4 жыл бұрын
Thank you!!!! It was really helpfull!! Compared to what i watch the last time, too many talk and nonsense code adding to it-_-
@saraneditscreations1750
4 жыл бұрын
Awesome finally learned 🤩
@isischan327
5 жыл бұрын
The best tutorial for image slider!! ghad thank you soooo much for your vid, it really helped a lot thank you ^_^
@phanuc3484
5 жыл бұрын
Works Perfect! your video helped me a lot ! You won a subscribed !
@RareTechniques
5 жыл бұрын
thx
@kev_ikena2612
4 жыл бұрын
Thanks bro.........i like you video.
@FAKENUM83R
4 жыл бұрын
Finalmente um slide show que funciona ! Excelente vídeo
@pedrocosta9769
4 жыл бұрын
Pode me ajudar? Como eu uso o código? Salvo os códigos mas nao funciona. Preciso importar alguma coisa?
@FAKENUM83R
4 жыл бұрын
@@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
@FAKENUM83R
4 жыл бұрын
@@pedrocosta9769 qualquer coisa, eu importei ele no meu Github tbm
@pedrocosta9769
4 жыл бұрын
@@FAKENUM83R Obrigado por responder, pode me passar o link do seu código?
@FAKENUM83R
4 жыл бұрын
@@pedrocosta9769 Github.com/mlmauriciolopes
@PetraSommer
4 жыл бұрын
Thank you, it worked perfectly well!
@felipebatista7469
3 жыл бұрын
i am from brazil! thanksssssssss brow!
@overeasy_sean251
3 жыл бұрын
Tutorial is very pog
@Ladakh
6 жыл бұрын
you saved me, thank you
@ashangel7343
6 жыл бұрын
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??
@aitboss85
5 жыл бұрын
You can use radio buttons, they support keyboard arrows navigation.
@friedchicken1
6 жыл бұрын
very nice! Is there a way to not stretch the images if they are not all the same proportions?
@LawnCrack
6 жыл бұрын
Check out Canva.com for easy photo editing, file type changes, and re-sizing/cropping.
@friedchicken1
6 жыл бұрын
tanks!!!! :)
@karunakarpatel194
5 жыл бұрын
Great one. It finally helped me :)
@sparshgupta8078
4 жыл бұрын
now that is how we want a tutorial to be
@kalidasanpotti1661
6 жыл бұрын
Thank you sir it worked out for me 👍👍👍
@mehrshadazizi7456
5 жыл бұрын
Thanks a lot it worked true.
@it_09arunesh_gautam97
4 жыл бұрын
thanks really helpful
@vohnlanusa471
6 жыл бұрын
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..
@idasgaard2681
4 жыл бұрын
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
@Khufos
5 жыл бұрын
You're boss, thank you !!
@nerofear12
6 жыл бұрын
Hello!!! I am not familiarized with SCSS and I can't run your code... Is there a way to do it with CSS?
@SteveFlanigan
6 жыл бұрын
Is there an issue with the audio portion on your video? I am not hearing anything.
@МаксимКрутов-е8б
4 жыл бұрын
Super!
@hosseinrahmani9647
3 жыл бұрын
Great
@omerbutt5662
4 жыл бұрын
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
@ЕкатеринаКосолапова-щ7б
7 жыл бұрын
WOW! Thank you very much! This works perfectly and the code is simple)))
@JonoBaritaspasial
5 жыл бұрын
Thanks you so much !!
@some_user1337
6 жыл бұрын
Nice code, dude!
@choco9625
6 жыл бұрын
does it work without the radio buttons ?
@DavidNitzscheBell
6 жыл бұрын
that's f'ing awesome!
@mohammed-i786
5 жыл бұрын
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.
@aivarasgrigonis656
5 жыл бұрын
Very nice
@وليدالنادي-ح3ق
3 жыл бұрын
Thanks Alot
@hellnavv
6 жыл бұрын
thank you!!! ;_; helped me sooooo much
@GurabaMediaBD
6 жыл бұрын
How to make it auto slider after every 5 seconds?
@FLYER395
6 жыл бұрын
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>?
@parketlaminat6017
6 жыл бұрын
Maybe need position:absolute;
@kalaek9318
7 жыл бұрын
Thankyou it's a good tutorial
@MRetroGamer
5 жыл бұрын
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.
@webdecorator6614
5 жыл бұрын
okay, can you give me a link of your code? So I check it.
@MRetroGamer
5 жыл бұрын
@@webdecorator6614 That's perfect! Thanks a lot :)
@andlukas
5 жыл бұрын
os caras são muito bruxo!
@oli2034
4 жыл бұрын
How would you incorporate something like this in a grid item?
@Luffyboy441
5 жыл бұрын
Can I use this by replacing images with a contact form or some sort?
@jaytee1662
6 жыл бұрын
Which editor you using??
@katien.1921
6 жыл бұрын
They're using codepen.io
@alexblue8524
5 жыл бұрын
I can't understand what this symbol ~ means, could someone help me ? please!!!
@m.art.a
5 жыл бұрын
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
@alexblue8524
5 жыл бұрын
@@m.art.a I'm not native, but in my opinion you're English is perfect, I could understand perfectly, so thanks.
@m.art.a
5 жыл бұрын
@@alexblue8524 Hhh, not great not terrible. Im glad you understood.
@kaleab27
4 жыл бұрын
Ur work is good but the ur camera need a little bit of an update
@UrvashiThakur-zy4jf
5 жыл бұрын
It's working but after putting it in my code my navbar is gone ? Putting navbar fixed isn't also helping
@pabios
5 жыл бұрын
thankx . really
@glygn
5 жыл бұрын
I copied the code exactly, but it's broken. image are placed as single images rather than vied as a slider
@nicelypenn
6 жыл бұрын
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?
@eliavr4216
6 жыл бұрын
Could I use this Image Slider for my personal Website?
@rahuljethwa2531
4 жыл бұрын
Hello sir how to use arrow in this tutorial
@rahuljethwa2531
4 жыл бұрын
Hello sir please reply me
@punjabeducationentertainme1209
5 жыл бұрын
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.
@SyedMuzammilMahasanShahi
6 жыл бұрын
Thanks
@isischan327
5 жыл бұрын
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 ❤️
@ganesan.r5430
3 жыл бұрын
#i1: checked~#one{ z-index: 9; } not working don't know why
@dan-unneeded
4 жыл бұрын
WOW
@gitabhaktisagar
5 жыл бұрын
It's so honoured I wanna know which editor do you use To see the output on the right of code
@pratikjadhav1154
5 жыл бұрын
Its codePen , google it and go on 1st link
@hiddenjewelsmedia
5 жыл бұрын
how would I move it automatically without javascript ?
@ashwinchaurasiya443
6 жыл бұрын
Really good code
@Fullwisher
4 жыл бұрын
I did exactly like the video but my dotted bar appears at the top of the page instead. Can anyone help?
@jv18creator
4 жыл бұрын
How do I make this autoplay?
@wayandanyaeleco4969
5 жыл бұрын
+subs
@renzsafe3738
5 жыл бұрын
Niceee
@VRPPawar
7 жыл бұрын
How you reduce videos size which software you use
@webdecorator6614
7 жыл бұрын
I am not using any special software to compress video, YT uses there own algorithm to compress the videos sizes.
@miahrana9040
5 жыл бұрын
Can anyone tell me,, what is the name of this codding Software,,,, plz give me download link,,
@eduardoklarmann1083
6 жыл бұрын
hi, how i can use with local images in my pc?
@34_sanskritikushik43
4 жыл бұрын
I don't why, it isn't working for me😓
@saisrinivaskaligatla6002
6 жыл бұрын
better do a video on text slider with controls as like image slider.
@farheenfarooq1749
5 жыл бұрын
it would be easier if there was some explanation while coding.
@JamesWelbes
4 жыл бұрын
Videos with no audio creep me out
@marceloguimaraes6087
5 жыл бұрын
like!!!
@carmelamavungu5680
4 жыл бұрын
where is the code html
@Saudavelpro
7 жыл бұрын
mto bom
@clashingcave5587
5 жыл бұрын
PLZ GIVE ME THE CODE FAST PLZ
@Bravox84
6 жыл бұрын
how to add keyframe autoplay? :-(
@tamhuathanh4331
6 жыл бұрын
u need javascript for that. in this video only used css3. that's why it cant autoplay
@solianojewelle4551
5 жыл бұрын
it's not working :(
@HimanshuSharma-jr1jj
5 жыл бұрын
Sir all my images are appearing vertically
@colorblindcreative4710
5 жыл бұрын
on the image container do display: flex;
@justlearn2860
6 жыл бұрын
How to make it move itself
@webdecorator6614
6 жыл бұрын
Check the JS of this PEN codepen.io/mayurbirle/pen/ppqRoZ?editors=0010
@salvadorangeles500
4 жыл бұрын
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.
@laischai5079
4 жыл бұрын
it is useless, one image remains under the other and does nothing.
Пікірлер: 139