Slideshow With Navigation Buttons Using Only HTML & CSS
HTML-код
- Опубликовано: 7 фев 2025
- ◘ Like our page : / darkcode0
◘ Paypal donation link : paypal.me/YBen...
◘ Download Files From Here : goo.gl/yGMXcC
◘ Code Editor : Atom
◘ Music Name : Lensko - Cetus [NCS Release]
◘ Music Link : • Lensko - Cetus | House...
A tip for anyone who might face the same problem: in case you use other pictures (like logos, etc) in your website, remember to give each a separate class name, instead of just 'img', so they won't overlap with those of the slider inside the css file! I spent some time trying to debug this...
hi could you explain me how i can do it because i wrote everything but it doesenìt still working
@@leonardoleggeri322 yeah I need help with that too.
@@leonardoleggeri322 me too either
Holy shit the ONLY video that actually delivers.
20 libraries and 30 shit youtubers for some reason were further up in the google results but you have my subscription
DarkCode, You are the best man!!
Way better than Online Tutorials who copies your ideas.
Never quit youtubing...you do not know the amount of people you are helping.
A lot of Thanks!!
Ultimate favourite page on youtube :) Love from India :)
Man I've learnt a lot from your videos , you give inspiration and motivation to learn coding..
Thanks from Egypt ✌
thank you my friend. you helped me make a birthday present for my dad
Nice to hear
Was Studying HTML CSS and i got Notification from You!
It's been 8 months did u learn css and html?
@@IUPLOADSHORTVIDEOS its been 11 moths now 😊
One year😉
1 month
@@IUPLOADSHORTVIDEOS we'll never know
Cool stuff man! Keep up the good work!!!
css:
body{
margin: 0;
padding: 0;
}
.slidershow{
width: 1500px;
height: 675px;
overflow: hidden;
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.navigation{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar{
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover{
background: #fff;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
.slides{
width: 500%;
height: 100%;
display: flex;
}
.slide{
width: 20%;
transition: 0.6s;
}
.slide img{
width: 100%;
height: 100%;
}
#r1:checked ~ .s1{
margin-left: 0;
}
#r2:checked ~ .s1{
margin-left: -20%;
}
#r3:checked ~ .s1{
margin-left: -40%;
}
#r4:checked ~ .s1{
margin-left: -60%;
}
#r5:checked ~ .s1{
margin-left: -80%;
}
Oh, and if you want to make something like: "if radio is selected than change background color from transparent to white".
just write this in css:
.WhiteBackground{
background-color: #fff;
}
============================
And add this script in your html:
$(document).ready(function() {
$('.bar').click(function() {
$('.bar').removeClass('WhiteBackground');
$(this).addClass('WhiteBackground');
});
});
This is great, and you have no page jumping!! i have been searching for a pure CSS image slider. This seems to be the best model so far.
and the tune is crunchy
Thank you man, you really helped, you are awesome!!!
I added this to my site and it still upholds a good look after 2 years .
How? what did you use??
never imagined we can build it without JS :)
What you have maded and how kindly share with me
How?/
The Best RUclips Tuitorial Channel i love html 5 and ccs 3....
I love your description
music with dark code is awesome!
omg, slidershow without javascript, cool man
তুমি কে যে চোখে দেখ না। আবার নাম তো রেখেছ মুসলমান ও খৃষ্টান নিয়ে।
No one is like u, i am ur fan
You and your all videos are awesome bro
Thnks for helping us
Thanks for the video ! If anybody as newbie as me wanna the pictures to link to another page, i finally found out ! (Not really difficult lol) --> Just put the between a link, like that :
I was suffering to make an java slideshow work in my website, thank you!
Brilliant use of input tag really. Awesome!
This channel is awesome!! god bless this channel.
I think it's much easier with js. Just move it on x axis by 100%.
So good. CSS very elegant.
Thankqq so much this is very helpful
Thanks dude, your a magician!
this is nice looks cool my website now looks matured
Awesome! Thank you for your videos
I found all of your videos soooooooooooooo awesome and great...So, I had to sub>> Thanks a lot bro..It helped me in my project..Thank u so much one again...
Exactly what I needed. But I'll change the design of buttons a bit. Thank you!😏
Wao.... great dude..👍
Thank you brother God blessed you
Many thanks it really works ❤️
this is so cool, i've learnt a lot. Thanks a lot
Thank you so much, You are the best!!!
u r amazinggggggggggggggggggggggggggggggggg
thank u sooooooooooooooooooooo muchhhhhhhh
keep it upppppppppppppppp
God Bless uuuuuuuuuu
This tutorial was a partyyyy!
it help me a lot thank you so much
Thankyou, you help me improve my html7css website project more better.
You're a genius! Have a good day 👍
you are the best
Liked and subscribed
Legend of awesomeness!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Superr bro
Keep it upp
You saved me!! thanks a lot
Thank you so much 👍🥰
you are soo... good man, thanks alot
Thank u so much dark code,it worked ♥.so helpful
you are awesome. I learnt a lot from you.
excellent, I did and everything went well.
So good tutorial
Very nice👍😊
I love it!!Thank you very much!!!
Worked for me! Thanks a lot!!
you"re really amazing dear!!
Thank you so much...it's very helpful
Thanks bro 👍👍👍👍
can you help me, how make three slideshow and three slideshow box on one row as e-commerce websites
Thank you, friend i am in venezuela. Good video
Thank you very much!
i wrote everything like you i even double checked but the image is still big, the overflow:hidden; code doesnt work.
i realley checked everything but this doesnt work on visual studio code!
perfect video
i just want to help people who have same problem like me
i couldnt change size of photo in css in slider show
who has this problem have to go on image at html file and edit that here
for example
Hello my name is Andrade I live in Brazil and you are to be congratulated for your videos. I am studying html to create a website for me. thank you very much
Nice video bro
Can you please do a video like this but with page background changing
Sorry for bad english, i'm brazillian
the video is on repeat because of audio xd after learning the sidebar thanks for both
Would it be possible to also implement automatic transition? Like show the next slide after 5 seconds? I know CSS has some animations and transitions features, but I don't know if they could be used to achieve this.
yes
Yes it is possible by animation keyframe and transition feature
Yes through animation u can achieve it
Please make a video where you explain how Atom works! Liike this if you want this too!
THANK YOU SO MUCH OMG
Thank you so much
This is awesome man
Very nice thx !
L'Italia è con te
Thx work for me, btw what text editor is that?
It's Atom he use as a editor. Try it it's great.
Nice tutorial 👍👍👍
I love your work!
Nice and instructive video. Tx
Thank you!! Amazing tutorial
=)
This is awesome, thanks!!
Thank you
You amazing bro
Why does all my pictures are joined together to show one picture in slideshow?
did you get a solution? I am having the same issue
I dont know who are you , but thanks you. I'm from Vietnam
excellent
Which editor were you using ? And did you delete some codes in between and replaced with smaller code ?
this only works for 5 ?
This is really good.
Everything is clear. I have just one question! How can you add the option, to cross from the first slide to the other automatically. For example, to stay 5 seconds and jump to the other post up to the end, and keeps repeating the same task from the begging to the end?
Thank you in advance
With the use of Css Animation you can do that. Just search for it
well done
thanks 👍👍👍👍
Nice trick, but is it possible to automate by time the transition without JS?
I really love you 😇
thank you i love you
Hello. Who sings the song in movie ?
Perfect 💙
How to display current position of slide in 5 slides. Can we make some active or checked type property
I followed your Video but HTML only shows First 1.jpg image ONLY.
I copied and pasted and changed all jpg file name from 1~5.jpg
but it only shows 1.jpg
what could be the proboem???
@@yusufbilgin61 what can you explain what you did?
3:55 can we use a button instead of that like next button
And how can we use
Plzz explain
how do i arrange it to the middle of the website ?
I Loved😍😍