Image Slider | HTML CSS Only!!
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- 🔻Image Slider by only click on image with ONLY html & css🔻
If you enjoyed the video please leave a
**
👍 LIKE 👍 & ♥️ Subscribe ♥️ the channel for more video like this.
**
and comment down below any question you have 👍
you can also share this video with your friend by this link :
• Image Slider | HTML CS...
This is what I copied from the video, in case anyone needs the code:
(I added only three photos, you get the point.)
Slider Sandbox
body{
display: flex;
align-items: center;
width: 100%;
height: 100vh;
background-color: black;
overflow: hidden;
}
.slide-container {
width: 100%;
height:85vh;
display: flex;
align-items: center;
overflow: hidden;
background-color: rgb(110, 110, 250);
}
.image-slider{
width: 100%;
height: 600px;
position: absolute;
left: 0;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.slides-div {
display: flex;
align-items: center;
justify-content: center;
margin: 0 30px;
}
.img{
position: relative;
width: 240px;
height: 370px;
transition: 0.5s;
}
.button {
position: absolute;
width: 240px;
height: 370px;
transition: 0.5s;
background-color: rgba(67, 67, 151, 0.2);
}
#slider-span1:target ~ .image-slider #img1,
#slider-span1:target ~.image-slider #button-1{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span2:target ~ .image-slider #img2,
#slider-span2:target ~.image-slider #button-2{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span3:target ~ .image-slider #img3,
#slider-span3:target ~.image-slider #button-3{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span1:target ~.image-slider{
left:20%;
}
#slider-span2:target ~.image-slider{
left:0%;
}
#slider-span3:target ~.image-slider{
left:-20%;
}
Thank you, but it is incomplete and doesn't work properly.
@@emarekica you will need to edit the src of the images. Hope that helps.
Thank you so much, omg i did the exact same code on the vid but it didn't work, then I saw your comment I copied It and it work perfectly thank very much god bless :)
Thanks for this. I created a section of this and put at the middle of other sections in the attempt to make webpage with this section as one of the sections as I scroll down to other pages, but it is not working..how to make this one of the sections.?
Thank you very much!
Maybe you already know, but for the next time with this symbol ($) you can put a number for each item (1,2,3...). For example .item-$*7 will create 7 div and their classes will have consecutive numbers
And thanks for the video.
This amazing! I just have one question, how would you set this up vertically? Like the photos would be stacking up on top of each other rather than besides each other?
i have another above the slide show and its not working togethe how can i run all of it at the same time and the same page
Nice. How can I add some descriptions for every picture at their bottom?
Great work. Works smart.
Awesome work man!
Thank you. This helped a lot.
¿Hay alguna manera de hacerlo infinito sin js? que al llegar al final se reinicie y lo contrario
🤩🤩🤩
source code please
THANKSSSS
How would I do the image positioning if I had 15 images?
intrerested... and what if i have unlimted number of images... hope someone will answer this...
@@djabermeghar4451 Javascript
Can you share source code please? Can't find where the issue is...
Slider Sandbox
body{
display: flex;
align-items: center;
width: 100%;
height: 100vh;
background-color: black;
overflow: hidden;
}
.slide-container {
width: 100%;
height:85vh;
display: flex;
align-items: center;
overflow: hidden;
background-color: rgb(110, 110, 250);
}
.image-slider{
width: 100%;
height: 600px;
position: absolute;
left: 0;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.slides-div {
display: flex;
align-items: center;
justify-content: center;
margin: 0 30px;
}
.img{
position: relative;
width: 240px;
height: 370px;
transition: 0.5s;
}
.button {
position: absolute;
width: 240px;
height: 370px;
transition: 0.5s;
background-color: rgba(67, 67, 151, 0.2);
}
#slider-span1:target ~ .image-slider #img1,
#slider-span1:target ~.image-slider #button-1{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span2:target ~ .image-slider #img2,
#slider-span2:target ~.image-slider #button-2{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span3:target ~ .image-slider #img3,
#slider-span3:target ~.image-slider #button-3{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span4:target ~ .image-slider #img4,
#slider-span4:target ~.image-slider #button-4{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span5:target ~ .image-slider #img5,
#slider-span5:target ~.image-slider #button-5{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span6:target ~ .image-slider #img6,
#slider-span6:target ~.image-slider #button-6{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span7:target ~ .image-slider #img7,
#slider-span7:target ~.image-slider #button-7{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span1:target ~.image-slider{
left:75%;
}
#slider-span2:target ~.image-slider{
left:50%;
}
#slider-span3:target ~.image-slider{
left:25%;
}
/* #slider-span4:target ~.image-slider{
left:-20%;
} */
#slider-span5:target ~.image-slider{
left:-25%;
}
#slider-span6:target ~.image-slider{
left:-50%;
}
#slider-span7:target ~.image-slider{
left:-75%;
}
it can't be dynamic
How can i do with so much data??
Thats right, unfortunately when I wrote it, it wasn't meant to be dynamic.
But you can use JavaScript in order to make it dynamic tho :)
Thanks but i need source code
Can you help me?
If I want to make a version with 30 pictures, how do I need to change the percentage between the all of them in the *image position? (When I try, some of the pictures disappear, because they move too much or too little)
20% or 25% changes don't work anymore.
Did you find the way? because I need it :(
U can use
Img{
Display: Flex;
align-item: center;
Justify-content: space between;
}
How to make it work on drag as it work here ?!
chắc mình làm sai chỗ nào rồi nó khum chạy huhu
how can i add 11 0r 10 images?
please help
this is not responsive
My screen jumps down so that the images clip halfway through the top of the screen. How can I fix this?
Unfortunately this slider is not responsive, so you have to play a bit around with numbers...
Do u find any solution??
@@bytemasters1997 how?
sir core code de do na
bro i need the source code can you help?
J’ai utilisé ce code, qui fonctionne super bien, mais j’aimerai rendre les images cliquables sauf qu’il y a déjà un href “”, si qqn peut m’aider je suis preneur
Where is your Code bro ? Please share it :v
no sirve, pura perdida de tiempo. no se ve bien el codigo...
i need source code emergancy pleaseeee
Slider Sandbox
body{
display: flex;
align-items: center;
width: 100%;
height: 100vh;
background-color: black;
overflow: hidden;
}
.slide-container {
width: 100%;
height:85vh;
display: flex;
align-items: center;
overflow: hidden;
background-color: rgb(110, 110, 250);
}
.image-slider{
width: 100%;
height: 600px;
position: absolute;
left: 0;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.slides-div {
display: flex;
align-items: center;
justify-content: center;
margin: 0 30px;
}
.img{
position: relative;
width: 240px;
height: 370px;
transition: 0.5s;
}
.button {
position: absolute;
width: 240px;
height: 370px;
transition: 0.5s;
background-color: rgba(67, 67, 151, 0.2);
}
#slider-span1:target ~ .image-slider #img1,
#slider-span1:target ~.image-slider #button-1{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span2:target ~ .image-slider #img2,
#slider-span2:target ~.image-slider #button-2{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span3:target ~ .image-slider #img3,
#slider-span3:target ~.image-slider #button-3{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span4:target ~ .image-slider #img4,
#slider-span4:target ~.image-slider #button-4{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span5:target ~ .image-slider #img5,
#slider-span5:target ~.image-slider #button-5{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span6:target ~ .image-slider #img6,
#slider-span6:target ~.image-slider #button-6{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span7:target ~ .image-slider #img7,
#slider-span7:target ~.image-slider #button-7{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span1:target ~.image-slider{
left:75%;
}
#slider-span2:target ~.image-slider{
left:50%;
}
#slider-span3:target ~.image-slider{
left:25%;
}
/* #slider-span4:target ~.image-slider{
left:-20%;
} */
#slider-span5:target ~.image-slider{
left:-25%;
}
#slider-span6:target ~.image-slider{
left:-50%;
}
#slider-span7:target ~.image-slider{
left:-75%;
}
Yoooo there are like 15 comments and 18 of those comments are asking for the source code and this dude just ignores them lol ahhaha clown #sourceCode?
Thanks for your comment, Unfortunately I dont have the source codes anymore.
U have eyes and fingers. Do it yourself.
If anyone wants to get the source code of this tutorial, he can dm me and get.
source code de dein please
Hi Fawad, that would be really great if you could send it to my email so I can share it with others. Thank you
www.frontenddesign@gmail.com
source code please!!!
if you have this on a page and it scrolls halfway down than add the whole html code into a div with an id
and add this script into the body
window.addEventListener("hashchange", () => {
if (
window.location.hash &&
window.location.hash.startsWith("#slider-span")
) {
document.getElementById("[idname]").scrollIntoView();
}
});
Of course changing the [idname] to your own id
Thx. That is really useful
It doesn’t work
than also not work
source code please