How to Create Image Slider Using HTML and CSS | Image Slideshow Tutorial

[@kevinxie6598]

For those who images stack together: adjust you max image sizes, meaning the image that you have imported is too big. To do this, go to ".slider-image {" section, under there type "max-width: 800px;" and "max-height: 600px;".

[@Jayden-cars]

Thanks

[@robogaming4731]

My Image is not stacking but but they are not in horizontal manner they are in vertical manner

[@Raffitch]

Thank you, a lot!! thank you so much!! Thx!! thanks!! Sankyou!!, Muchas gracias!!! MUITO OBRIGADO!!!

[@kevinxie6598]

@@Raffitch No problem

[@alwaysgratefulmixail7569]

@@robogaming4731 use display: flex;

[@oldguy8177able]

I've been coding for about a year and this simple thing slideshow is the hardest ,man I've done 20 different slideshows everything works except the slider

[@memoonashafqat1003]

yeah u r irght only image shown .

[@octaviolara9087]

It worked for me. Not at first though, i had to twitch around for a while and i actually don't know what made it work, but now it works. If your image background is white, set the button color to black or blue or anything else, i've seen plenty of persons here complaining about the buttons not showing or the code not working... It works, and the buttons show if you change the color to adapt your image background

[@luvualwayz18]

could you paste your code? mine isn't working either and I feel like it should. I resized all my images to the same size. It's clean now but now buttons and no movement.

[@octaviolara9087]

@@luvualwayz18 Sure thing, it is inside a project with has a lot of code so i will just paste in here Html: css: .slide-container{ height: 300px; width: 300px; margin-left: auto; margin-right: auto; overflow: hidden; text-align: center; } .image-container{ height: 300px; width: 900px; position: relative; transition: left 2s; -webkit-transition: left 2s; -moz-transition: left 2s; -o-transition: left 2s; } .slider-image{ float: left; margin:0px; padding: 0px; } .button-container{ top:-20px; position: relative; } .slider-button{ display: inline-block; height: 10px; width: 10px; border-radius: 5px; background-color: black; } #slider-image-1:target ~ .image-container{ left:0px; } #slider-image-2:target ~ .image-container{ left:-300px; } #slider-image-3:target ~ .image-container{ left:-600px; } My advise would be to work this off first in a blank project and then paste it to the actual page you're trying to pull off. Good luck. I even used it twice in the same page and all you have to do is change the id or the class inside the code so it doesn't mess up with the other one. Good luck, i hope this helped you

[@hcivopsaR]

How can we make it so it automatically slides through the images?

[@nolongeriproductions]

Some are saying it doesn't work. It didn't work for me at first either, and then I realized I missed a whole class: the button-container class which comes JUST AFTER the .slider-image class. The code that was missing for me was .button-container { top: -20px; position: relative; } I plugged that in and it worked perfectly. Thanks for the tutorial and explanations that went along with it. Very helpful! If there's a way to add automated timing and a loop as well as right and left navigation, that would be an amazing add!

[@youceflaib2158]

even when im add it it still does not work

[@myrtheooink7570]

@@youceflaib2158 same for me

[@youceflaib2158]

@@myrtheooink7570 its because the class and tags the erreur in them

[@prashantmajumdar1519]

Hey i have done the same but there are no buttons on images and only first image is showing

[@amerux2006]

it a scams

[@joeblack7156]

Did you ever get it to work? I got the same result as you.

[@prashantmajumdar1519]

@@joeblack7156 no man it's the same

[@ValeoPRJCT]

same bro, i don't know how to fix it

[@amandadrieenhuijzenn]

i did by .button-container {top: -200px;} Now i see buttons.. :)

[@MrMtzr]

The best solution I could find. Might be nice to add functionality for images of different sizes and giving the 'current' selected button a different background-color! I managed to do that by adding javascript of my own, but if there was some way to do that with pure CSS, that'd be amazing really :)

[@anidhyaagrawal2824]

on typing excatly the same coding , I'm not getting the required output. My images are not sliding . They are coming vertically and also coding is also coming on the output page

[@mendistudio]

Maybe the total sum of the images widths doesn’t match the container’s width.

[@charlieschuyler9377]

@ your probably missing some "< >" if code is on the actual site

[@justgamingacademy9244]

Was really helpful. Thank you so much. Would be great if you could upload a video on about how to make the images move automatically.

[@apfel4374]

u need js for that

[@melloscripter]

Hey, my English isn't very good, but I could understand all what do you said and did, so I aprecciate your content, is very helpfull and clean, thanks!

[@clevertechie]

You're welcome!

[@SilverKEYofficialYT]

the link buttons don't work for me...

[@TrueMishamol]

To auto-resize slider to fit the screen, just change pixels to percentages in css file, and remove fixed size in slide-container. Also in css file, I set the number of pictures to 10, but in html file I be able to use less than 10 just without adding extra buttons. .slider-container { max-width: 1024px; /* Optional */ margin-left: auto; margin-right: auto; overflow: hidden; text-align: center; } .image-container { width: 1000%; /*Number of pictures. There can be many times more pictures here than on the slider*/ position: relative; transition: left 2s; -webkit-transition: left 2s; -moz-transition: left 2s; -o-transition: left 2s; } .slider-image { width: 10%; /*One picture of their total*/ float: left; margin: 0px; padding: 0px; } #slider-image-1:target ~ .image-container { left: 0px; } #slider-image-2:target ~ .image-container { left: -100%; } /* etc */

[@saranyajeyam811]

I want automatically moving images and keep the cursor stop moving plzz upload that video ...

[@justinkringstad4167]

my images arent sideways. they stacked on top of each other.

[@richmondarhin2912]

Yhh. Mine too. I've done it three times already 🤦

[@minater247]

Just a random idea - have you tried setting them to inline? Just saying this since more people seem to be having the issue

[@jorn3168]

@@minater247 thats also not working

[@earaasanray8928]

same here

[@parthtyagi9266]

same problem please help

[@Chineization]

this helps me a ton! thank you! there's only 1 issue I have on my page. everytime, I need to click on a dot(button) before it could run properly when I load up the slider. do you know what cost that happen? and how we could fix an issue like this? thank you!

[@bjmgraphics617]

My images are super big and I got nothing but one truncated image with no controls. My images are 5000 pixels in width by 822 in height. I made sure to type in exactly the way you have in the video, plus I have four total images. thanks

[@Marko_Djuricic]

I appreciate you helping people but those who don't understand html/css really well, this is very confusing because you first style something in css that you haven't even created in html yet and you don't leave your text editor for a sec to show the progress. You know what you want to make but others don't, so you have to show how every style property affected the element after you styled it. This is how you work and it's fine but it's not fine for a tutorial where people need to understand. That being said, I repeat again, I appreciate your help, this is just a motivational critic. I'm not saying you don't care if people understand because you do care, I'm saying that not everyone is a teacher, me being one of those who aren't. I can't teach jack to other people because I do the same things you did in this video. I forget that people don't know the same things that I do and that something trivial to me is not trivial to others. Also, I'm not saying you should not be teaching, I'm saying that you should continue teaching but work on it. Good luck.

[@ademyildizlanguages]

I was exactly about to write same comment.

[@abdelaesus6678]

Great content. Clean, clear, useful and instructive.

[@danielasofiatreminio8815]

Thank you so much! this really works. I was having problems at the beginning then I realize my images had different sizes. When I changed them to the same size the slider appeared! thank you for sharing

[@prashantmajumdar1519]

Can you please tell me how you changed images to same size

[@prashantmajumdar1519]

Abd how the slider appear

[@guitarstrummom]

@@prashantmajumdar1519 Use Photoshop to crop your images to the same size. Then use the cropped images.

[@prashantmajumdar1519]

@@guitarstrummom thanks pal

[@prinzemu1498]

Very good tut! The second explanation at the end really helped.

[@user-eu9cl8vc4i]

For me when I tried this, my photos didn't go into a slide container they just blocked on top of each other. I followed the video to a T, any suggestions on what I could possibly be doing wrong?

[@diogomiranda9098]

My button container doesnt show up, it keeps hidden and when i check on my program it is actually there, but when i go on to the preview it doesnt show up. can u help me out?

[@octaviolara9087]

Make sure to change the color of your button so it shows.

[@gccreativeworks]

Great delivery on how to create slide show. Very detailed. Thank you.

[@GodsAutobiography]

Thanks for the tut, but I cannot seem to get it to work. I've run through it twice and I cannot find any typos or inconsistencies. For starters, my buttons are invisible, and now they are showing up below the screen. I can see through f12 that they appear to be just underneath my page. I had somehow managed to get them to display higher at one point, but they were invisible. Regardless, when I click either of them i am put on a page with an error that the file cannot be found. Zero idea as to what the issue could be...

[@GodsAutobiography]

Could someone send me the source code or their own code that works so I can test it out?

[@SPGAMING]

same :(

[@dhritidey8500]

ikr!!!I am facing the same issue

[@peepwebdev575]

Thank you, thank you, thank you!!!! you have saved my project. I have spent days trying to find a way to do this, looking through complex JS which i don't understand. This is such a simple and powerful technique. Well done for sharing!

[@peepwebdev575]

That being said, i couldn't actually use this as it has an annoying "page jump" the first time the a link is clicked. I think this is due to core HTML behaviour and so there is no fix to this issue. As cool and easy as this is, i don't think you can use it with the annoying jump on the first click.

[@guitarstrummom]

@@peepwebdev575 I got it to work in Chrome (but not in Edge) by adding "left:0px;" to the image-container class, as suggested in one of the other comments. Now I'm trying to figure out how to make this work in Edge, a browser not mentioned in .image-container.

[@zeelkapadia3842]

I do the same code but i m not able to set more than 2 the 3rd image shows blank slide

[@SelloMathakhoe]

great stuff! ... Your video really helped me. I created html and css slideshow properly now. Awesome!

[@joepapi8210]

Great tutorial! I was trying to do this without using JS

[@alexserac8475]

Can anybody help me? How do you make it loop through the images?

[@frenkie_music]

make a @keyframes animation and set it to infinite

[@hcivopsaR]

@@frenkie_music Can you go into more detail on how to do this?

[@gameplayerzzofficial5089]

why can't I see the second picture and third picture, but I can see the first picture

[@sankalptripathi3683]

Please help....how to double this slide....I have tried to double your slide program but the button function merged!!!!...please helpppp!!!

[@kaiichou7159]

Thanks For The Tutorial My Computer Teacher Is Really Impressed To What I have Done This Really Helps Me Alot

[@basdevries27]

Hey! Quick question. I've literally copied you but the buttons don't trigger the image to slide. I can see the link change and whenever I reload the page after I hit one of the buttons it slides to the image I want! What am I doing wrong?

[@Yukina286]

do you have with a caption for each image?

[@hwa28]

works perfect! Thanks for your video. But if I want the slider fits the whole page, how can I change the width, it cannot be 100%.

[@occasionalytcommenter6553]

Simply reduce it ("Width: 50%")

[@ukar2]

It does not work!

[@wackodreamer]

anyone know why I may not be able to get the slider buttom to show up? Im pretty sure everything is correct but its not there

[@mark2213]

This didnt work on either Chrome or safari? Both a stacking of photos occurs, the button doesn't show up and there is no slide function. The container dimensions have no affect when changed. Adding a max downsizes the photos, but has no other affect. Very strange that some have seen similer issues and it works for others????

[@vivienng9802]

I'd put in page title but will be push upward whenever I click on slider-button. I tried changing some top margin but does not work. Please advise how to prevent this.

[@shubhangarbeeragere9060]

I learned something new in CSS, :target and ~ thanks

[@utkarshchaudhary6160]

this is ultimate!!!!! great work bro! Really appreciate it....

[@fluoponey]

Hello! I can't see the same result, the code is alright and i'm using Visual Studio code, can you help me?

[@stefaniacristini3674]

I have the same problem😕

[@fluoponey]

@@stefaniacristini3674 =( @Clever Techie can you help us? Thank you

[@KOM-jh]

Not sure where I'm going wrong with this one but I only have one image that shows with no slideshow. Basically copied everything except the size of the .slide-container and the .image-container and everything else is the same as the tutorial. Gone over it a few times and did notice some spelling errors, but can't find anything else? kinda stumped

[@pierredugowson8731]

Thanks, it works well. But how can I replace the buttons by arrows on the sides ?

[@caseymcnair4886]

wish there was a mega like. thanks for the help on my final.

[@akrockit539]

I am not knowing how to get same sized photos

[@sweetbaby3760]

Hey, what about trying to make the 3rd image in the image slider go back to the 1st going left?

[@fontsize6973]

it works very well, no complaints thanks for making this tutorial

[@TUNNELTV]

not working

[@chitowngardener1658]

Same at first for me. You just need to do the math on your image count and all will be fine. Works like a charm for me.

[@andrewwright8942]

used this concept for creating a slider gallery on a small section of a webpage, however, every time I click the button to transition, it jumps down the page. The slider does work, it just has another effect that I do not want.

[@octaviolara9087]

I'm having the same problem right now, did you manage to solve it? the op is not answering any questions

[@IsaacSchluesche31]

Is there any way to do this where the images don't really "slide" but just change in place?

[@grygoriiovsianikov6671]

just delete the transition: left 2s; and thats it :)

[@IsaacSchluesche31]

@@grygoriiovsianikov6671 thank you so much!

[@grygoriiovsianikov6671]

@@IsaacSchluesche31 :D

[@matthewjonathonmajor5370]

I don't understand how yours works because you have .slider-container as the class accessor in the css but its slide-container in the html. There is nothing inside the span so I don't know how you got there to be dots there either. Can you please expliain this to me? I am very confused and can't get it to work.

[@mohit_50]

Had you watched the video you'd know he corrected it near the end.

[@elemori6372]

Love it, thank you. Best video that explains thoroughly.

[@LYJManchesterUnited]

Hi I was wondering if it is possible to display multi images at once using just html and css?

[@robogaming4731]

A goods Explanation, Efforts. I Love the Video

[@clevertechie]

Glad you loved the video, thank you!

[@srinikethanr1056]

hey, it was really useful, but I need source code to check with my current image can I get the code.?

[@cbl265]

Can I use this source code for my own website? Or do I need to be subscribed to his Patreon?

[@dhritidey8500]

I am not able to do it with 5 photos,like the buttons are not appearing let alone the sliding effect and I literally wrote the same syntax,I am using Sublime Text editor3.0 for HTML/CSS.Could someone pls help me out??😥😥😥

[@user-eu9cl8vc4i]

I am using 5 images as well and having the same issue. I see your comment was from about a year ago but by any chance have you found/remember a solution?

[@dasunprabashana2554]

Ty bro . really helpful.

[@clevertechie]

you're welcome!

[@minater247]

Everything's working perfectly, except the alignment... the images arent aligned to center, while the buttons are. I'll try and figure this out.

[@steveejoel3248]

I got the buttons but when i click on them nothing happens im using jsbin

[@malemonstir]

damn I was following every stroke and all but there are parts when he doesnt show or mention what he clicks or the shortcut keys, how did he preview his work? I have no clue. newbie here learning how to code.

[@guitarstrummom]

This works beautifully in Chrome and Safari. But in MS Edge, the three photos merely line up one under the other. What's different in Edge that causes this problem?

[@isaaccarter7786]

Easy fix, don't use microsoft edge

[@jakeisthebest9237]

Worked for me! Thanks.

[@3doh527]

What do i do if i want to add a different caption to each of the image?

[@MarioGuevaraC]

Thank you, Kanye, very cool

[@chrissyabby208]

I followed your tutorial, I in fact copied exactly what you did, I dint get the same result. I used sublime text editor but is unregistered, could that be the reason?

[@MrVwin]

you can do whatever you want with the unregistered version. it has nothing to do with that

[@EvlEgle]

thats not how html/css work... its dependent on the browser parsing it. update your browser, make sure the code is correct.

[@jasmineburton1493]

Thank you! This video was very helpful! :)

[@megamanx913]

Thank you so much, I really gonna use it your way, but I have 6 images I want to use it. So how I supposed to use 6 images on my website? just like you did in your video? please sir, I really need it.

[@TanveerHashmi]

in image container class image width will be 6 times.span will be 6 times instead of 3.

[@ScreenPrintR]

Is it browser specific? I tried it in Chrome and Firefox. Didn't work on either one.

[@ScreenPrintR]

I think the problem might be because I put html comment tag. For some reason new browers don't like comment tags.

[@abimaelyisrael858]

Thanks a bunch for these videos man!!! This was a blessing for me.

[@anonanon521]

Is there a more elegant way to do this? Also can I turn the images into links?

[@outrageoushornet665]

How do you add buttons then?

[@dyathinkhesaurus]

your slidecontainer class is referred to in the CSS as slideRcontainer..

[@themuskanthapa]

Thank you so much.. Helped alot

[@jadeconnolly6711]

works perfectly thank you soooo much

[@usuallyhungry657]

and what if I want the images sliding automatically too

[@giampearopeter1230]

exactly ,i want to make it in this way

[@shookbeef1540]

I did exactly this and it didn’t work for me

[@z.o.n2798]

asin the thing is dope but it is not working

[@scsv8525]

the button doesnt appear can someone help me?

[@stevenarevalo2308]

link to download the image folder please

[@scienceblossom6197]

Wow! target! Interesting feature of CSS! TY!

[@mofurry8430]

worked perfect with me! Thanks for the tutorial!

[@kommanavikas426]

Hi sir! I tryed almost 4to 5 times but still output not coming as we want.😔😔can u help me🙏

[@GtrBeez]

Did u ever figure it out Bc I’m having the problem of them stacking

[@mehakshabbir5956]

this brother is amazing

[@mangualamcany5004]

Ok, that's not working.

[@debr961]

Works great!

[@gladiator1888]

The Code doesn't work on safari

[@joep1131]

thanks very informative great Job !!

[@thistaken5550]

I'm confused it didn't work for me :( Edit: it works just the buttons aren't showing

[@Fathom988]

Awesome video thank you!

[@jibinsaji9523]

kolllam pwoli saanam

[@Furiac.]

Awesome video, The one thing I ran into is I named somethings slider container instead of slide container lol

[@jorn3168]

well done! i love it.

[@md.mahfuzorrahman8066]

Can you make it automatic?

[@joeblack7156]

I went over my code. I get only the first photo and no buttons. My code matches yours line for line.

[@scsv8525]

same

[@chriskaufmann8774]

How do you make this responsive?

[@aleksandar2565]

you can't

[@supsaifi4042]

Good and working but it doesnt moves automatically u have to use button for it :((

[@greenchilistudioz4537]

My pictures are not showing, all are in same size and follow instructions, this video is boggest!

[@360ulearn8]

Nice. Thank you.

[@sabinechancel]

So easy with U ! Many thanks :)