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

Подписаться 102 тыс.

Просмотров 263 тыс.

50% 1

Upgrade your Clever Techie learning experience:
/ clevertechie
UPDATE! (9/13/19) New features and improvements for Clever Techie Patreons:
1. Download full source code with detailed comments - easy to learn and understand code
2. Weekly source code file updates by Clever Techie - every time I learn new things about a topic I will add it to the source file and let you know about the update - keep up with the latest coding technologies
3. Library of custom Clever Techie functions with descriptive, easy to understand comments - skyrocket coding productivity, code more efficiently by using Clever library of custom re-usable functions
4. Syntax code summary - memorize and review previously learned code faster
4. Organized file structure - access all Clever Techie lessons, source code, graphics, diagrams and cheat sheet from a single workspace - no more searching around for previously covered material and source code - save enormous amount of time and effort
5. Outline of topics the source file covers - fast review of all previously learned coding lessons
6. Access to all full HD 1080p videos with no ads
7. Console input examples - interactive examples that make it easier to understand and learn coding
8. Access to updated PHP Programming Book by Clever Techie
9. Early access to Clever Techie videos
Subscribe to Clever Techie patreon:
/ clevertechie
Learn how to create image slider using only HTML and CSS with no Javascript. We're going to use some CSS tricks to create the buttons which will transition our image slides into view. There are many image slideshow tutorials online but few of them are made with HTML and CSS only with no Javascript, learn how to create image slider with basic HTML and CSS.
``````````````````````````````````````````````````````````````````````````````````````````````
Hey guys, I'm now using Patreon to share improved and updated video content and source files. For a small fee you can access all the downloadable files from this lesson (source code, icons & graphics, cheat sheets, OneNote notes) and everything else included in the video from the Patreon page. Additionally, you will get access to ALL Clever Techie videos in HD format with no ads. Thank you so much for supporting Clever Techie :)
Download this video's files here:
/ 21621406
( You also get access to ALL source code and any downloadable content of ALL Clever Techie videos, as well as access to ALL videos in HD 1080p quality format with all video ads removed! )
`````````````````````````````````````````````````````````````````````````````````````````````
( Website ) clevertechie.com - PHP, JavaScript, Wordpress, CSS, and HTML tutorials in video and text format with cool looking graphics and diagrams.
( RU-vid Channel ) / clevertechietube
( Google Plus ) goo.gl/J71p6f - clever techie video tutorials.
( Facebook ) / clevertechie
( Twitter ) / theclevertechie
``````````````````````````````````````````````````````````````````````````````````````````````

Хобби

Опубликовано:

25 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 220

@abdelaesus6678 3 года назад

Great content. Clean, clear, useful and instructive.

@gccreativeworks 3 года назад

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

@prinzemu1498 3 года назад

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

@kevinxie6598 3 года назад

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 3 года назад

Thanks

@robogaming4731 2 года назад

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

@Raffitch 2 года назад

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

@kevinxie6598 2 года назад

@@Raffitch No problem

@alwaysgratefulmixail7569 Год назад

@@robogaming4731 use display: flex;

@elemori6372 5 лет назад

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

@SelloMathakhoe 4 года назад

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

@utkarshchaudhary6160 4 года назад

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

@abimaelyisrael858 4 года назад

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

@MrMtzr 3 года назад

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

@jasmineburton1493 4 года назад

Thank you! This video was very helpful! :)

@MarioGuevaraC 5 лет назад

Thank you, Kanye, very cool

@joepapi8210 Год назад

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

@jakeisthebest9237 4 года назад

Worked for me! Thanks.

@justgamingacademy9244 4 года назад

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 3 года назад

u need js for that

@octaviolara9087 4 года назад

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 4 года назад

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 4 года назад

@@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

@easyprogramminglessons2943 Год назад

Thank you, sir The video is really helpful!

@oldguy8177able 4 года назад

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 4 года назад

yeah u r irght only image shown .

@caseymcnair4886 2 года назад

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

@scienceblossom6197 4 года назад

Wow! target! Interesting feature of CSS! TY!

@jadeconnolly6711 4 года назад

works perfectly thank you soooo much

@Fathom988 4 года назад

Awesome video thank you!

@fontsize6973 4 года назад

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

@joep1131 4 года назад

thanks very informative great Job !!

@kaiichou7159 4 года назад

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

@danielasofiatreminio8815 5 лет назад

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 4 года назад

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

@prashantmajumdar1519 4 года назад

Abd how the slider appear

@guitarstrummom 3 года назад

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

@prashantmajumdar1519 3 года назад

@@guitarstrummom thanks pal

@Czoy9 Год назад

@@guitarstrummom It's easier if you set the same height and width for all of the images just like that: height: 500px; width: 400px; then use this property object-fit: cover;

@debr961 4 года назад

Works great!

@jorn3168 4 года назад

well done! i love it.

@peepwebdev575 4 года назад

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 4 года назад

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 3 года назад

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

@mofurry8430 4 года назад

worked perfect with me! Thanks for the tutorial!

@sabinechancel 4 года назад

So easy with U ! Many thanks :)

@themuskanthapa 3 года назад

Thank you so much.. Helped alot

@shubhangarbeeragere9060 2 года назад

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

@dasunprabashana2554 2 года назад

Ty bro . really helpful.

@clevertechie Год назад

you're welcome!

@melloscripter 2 года назад

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!

@mehakshabbir5956 4 года назад

this brother is amazing

@vivienng9802 5 лет назад

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.

@robogaming4731 2 года назад

A goods Explanation, Efforts. I Love the Video

@clevertechie Год назад

Glad you loved the video, thank you!

@nouman2332 5 лет назад

Working 100% Thanku

@jibinsaji9523 4 года назад

kolllam pwoli saanam

@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!

@360ulearn8 3 года назад

Nice. Thank you.

@nolongeriproductions 5 лет назад

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 5 лет назад

even when im add it it still does not work

@myrtheooink7570 5 лет назад

@@youceflaib2158 same for me

@youceflaib2158 5 лет назад

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

@Furiac. 5 лет назад

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

@sweetbaby3760 4 года назад

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

@anidhyaagrawal2824 4 года назад

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 3 года назад

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

@charlieschuyler9377 3 года назад

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

@Yukina286 2 года назад

do you have with a caption for each image?

@basdevries27 4 года назад

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?

@pierredugowson8731 3 года назад

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

@LYJManchesterUnited 2 года назад

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

@TrueMishamol 2 года назад

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 */

@srinikethanr1056 4 года назад

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

@zeelkapadia3842 4 года назад

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

@prashantmajumdar1519 4 года назад

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

@yoshiteru3719 4 года назад

it a scams

@joeblack7156 3 года назад

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

@prashantmajumdar1519 3 года назад

@@joeblack7156 no man it's the same

@ValeoPRJCT 3 года назад

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

@amandadrieenhuijzenn 3 года назад

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

@3doh527 4 года назад

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

@cbl265 2 года назад

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

@miketech1 4 года назад

Thanks for the video but I have two questions: (1) Which code processor did you use in the video? (2) How can the codes be inserted on the header of a website for the slides to work?

@hwa28 4 года назад

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 3 года назад

Simply reduce it ("Width: 50%")

@wackodreamer 3 года назад

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

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

@hcivopsaR 7 месяцев назад

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

@Dbomb81 4 года назад

Whenever I open the page for the first time or refresh the browser the first click never transition/slides. It moves to ether image i click to go to, but doesn't transition/slide. After the first click, all clicks following transition/slide as they should, why isn't it transitioning/sliding on the first click?

@brendonmartin5532 3 года назад

I know this is a bit late, but you need to add a left: 0; to the image-container class. This will allow the transition the first time you load the page.

@minater247 4 года назад

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

@MrVwin 4 года назад

thumbs up for the image selection :)) the girl in the middle reminds me of Kate Archer in the "No one lives forever"

@malemonstir 4 года назад

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.

@SilverKEYofficialYT 3 года назад

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

@GodsAutobiography 5 лет назад

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 5 лет назад

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

@SPGAMING 5 лет назад

same :(

@dhritidey8500 2 года назад

ikr!!!I am facing the same issue

@saranyajeyam811 5 лет назад

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

@johnmarketoc6147 4 года назад

Thanks

@steveejoel3248 4 года назад

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

@chrissyabby208 5 лет назад

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?

@Ninjer 4 года назад

@gameplayerzzofficial5089 2 года назад

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

@iteleski2 4 года назад

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

@diogomiranda9098 4 года назад

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 4 года назад

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

@outrageoushornet665 10 месяцев назад

How do you add buttons then?

@bjmgraphics617 2 года назад

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

@ScreenPrintR 5 лет назад

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

@ScreenPrintR 5 лет назад

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

@matthewjonathonmajor5370 4 года назад

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 2 года назад

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

@Marko_Djuricic 4 года назад

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 4 года назад

I was exactly about to write same comment.

@alexserac8475 5 лет назад

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

@frenkie_music 3 года назад

make a @keyframes animation and set it to infinite

@hcivopsaR 7 месяцев назад

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

@shankaryoyo8881 3 года назад

Just wow

@stevenarevalo2308 4 года назад

link to download the image folder please

@sankalptripathi3683 3 года назад

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

@softechcyber5981 3 года назад

why slide-container on index.html then slider-container on css??

@mark2213 3 года назад

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

@ukar2 5 лет назад

It does not work!

@guitarstrummom 3 года назад

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 3 года назад

Easy fix, don't use microsoft edge

@dyathinkhesaurus 4 года назад

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

@megamanx913 4 года назад

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 4 года назад

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

@IsaacSchluesche31 4 года назад

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

@grygoriiovsianikov6671 2 года назад

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

@IsaacSchluesche31 2 года назад

@@grygoriiovsianikov6671 thank you so much!

@grygoriiovsianikov6671 2 года назад

@@IsaacSchluesche31 :D

@andrewwright8942 4 года назад

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 4 года назад

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