Image Slider | HTML CSS Only!!

🔻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...

[@swun3367]

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%;
}

[@emarekica]

Thank you, but it is incomplete and doesn't work properly.

[@swun3367]

@@emarekica you will need to edit the src of the images. Hope that helps.

[@engeltalenjale8438]

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 :)

[@danielmalyuta4599]

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.?

[@jkbruzo2534]

Thank you very much!

[@JesusDavid-bh3rg]

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.

[@mddivm]

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?

[@user-fh1ly1ui8k]

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

[@danielmalyuta4599]

Nice. How can I add some descriptions for every picture at their bottom?

[@kiambojyms2196]

Great work. Works smart.

[@reynaldi4801]

Awesome work man!

[@tuomosalomaa8689]

Thank you. This helped a lot.

[@wilkerpachecoperez376]

¿Hay alguna manera de hacerlo infinito sin js? que al llegar al final se reinicie y lo contrario

[@monicar6076]

🤩🤩🤩

[@jaykhavadia7299]

source code please

[@hectorPerez-qf1ho]

THANKSSSS

[@Fkamynk]

How would I do the image positioning if I had 15 images?

[@djabermeghar4451]

intrerested... and what if i have unlimted number of images... hope someone will answer this...

[@burjanadze3988]

@@djabermeghar4451 Javascript

[@studywith-grace]

Can you share source code please? Can't find where the issue is...

[@meemkaaf87]

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%;
}

[@kyawkokooo6595]

it can't be dynamic
How can i do with so much data??

[@bytemasters1997]

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 :)

[@msrahmah501]

Thanks but i need source code

[@tuomosalomaa8689]

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.

[@amalal-hamad2615]

Did you find the way? because I need it :(

[@rushikesharote5465]

U can use
Img{
Display: Flex;
align-item: center;
Justify-content: space between;
}

[@awsradwan5585]

How to make it work on drag as it work here ?!

[@thungangothi8889]

chắc mình làm sai chỗ nào rồi nó khum chạy huhu

[@linsmolantony1982]

how can i add 11 0r 10 images?
please help

[@20sanketh]

this is not responsive

[@beryl.pretorius]

My screen jumps down so that the images clip halfway through the top of the screen. How can I fix this?

[@bytemasters1997]

Unfortunately this slider is not responsive, so you have to play a bit around with numbers...

[@amitmeena3607]

Do u find any solution??

[@amitmeena3607]

@@bytemasters1997 how?

[@Lofi_songs365]

sir core code de do na

[@harmanarora5535]

bro i need the source code can you help?

[@legrandetlaffreux6043]

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

[@chanh4738]

Where is your Code bro ? Please share it :v

[@JustoLux]

no sirve, pura perdida de tiempo. no se ve bien el codigo...

[@enooo8102]

i need source code emergancy pleaseeee

[@meemkaaf87]

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%;
}

[@dryhail]

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?

[@bytemasters1997]

Thanks for your comment, Unfortunately I dont have the source codes anymore.

[@ThunderstruckElectronix]

U have eyes and fingers. Do it yourself.

[@fawadikram9740]

If anyone wants to get the source code of this tutorial, he can dm me and get.

[@toobasheikh106]

source code de dein please

[@bytemasters1997]

Hi Fawad, that would be really great if you could send it to my email so I can share it with others. Thank you
[e-mail]

[@pranitathorat9953]

source code please!!!

[@fr4g_ut845]

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

[@Tudy09]

Thx. That is really useful

[@amitmeena3607]

It doesn’t work

[@3djosh767]

than also not work

[@hazzanawarafik6100]

source code please