Simple HTML & CSS Image Slider - No jQuery or JavaScript 

Me also

Have you tried this in your pc

@@ramkrushnhari9233 yeah it worked

What all software we required for this slideshow in our pc

@@ramkrushnhari9233 you need a text editor or a ide to write the code. I used webstorm by jetbrains or you can use simple text editor like atom. Thats all u need. Once you write the code, save it and open with the browser. very easy.

We're you able to get the code to work?

Hello, you need to change the number of keyframe transitions and the percentages. I don't have the tutorial code in front of me.. but I believe it was a 5% gap for each unique slide making the transition.

yeah if op sees this i bet there's other who would like to see this answered. it's a hassle trying to get in the right images, let alone trying to get the figure itself to resize to a smaller box without f-ing up the ratios set for the images according to their amount and slide time

Change width

I would like to know that to!!

Will you please help me

Means what software we required to do slideshow like this

it seems so every slider i do i can get it to move but the sizes are not right. i get this issue no matter whoes video i watch on sliders

Hey just checked Firefox, Chrome, Safari, and it's working fine for me. Check the completed files in the description.

Try using -webkit

it depends on the percentage the width of your image takes...for example his was 20%

That's how you control how fast the image is going to change from image to another image, if you want an exact calculation then here you go.. For example, we want a total of 10 second animation, but want to allocate a total of 1 second transition change from image to another image, and we have 5 images, the calculation would be.. 9/4 = 2.25, we now know that we have 2.25 second to see every image before the transition takes effect, You might ask, if we have 5 images, why 9/4 ?, it's because the final image and the first image is the same, and the animation-iteration-count is infinite, so it will loop anyways, now to get the animation transition speed, we will divide 1 by 4, 1/4 = 0.25, Now let's convert them to percentage so that we can use them to keyframes 2.25 second / 10 * 100 = 22.5%, and for animation transition speed: 0.25/10 *100 = 2.5%; now we can construct our keyframes @keyframes slide{ 0%{ left: 0; } 22.5%{ left: 0; } /*0 to 2.5 second (which is 22.5 in percentage) we want to stop the animation to see image1*/ 25%{ left: -100%; } /*then, we add the transition speed here, which is 0.25 second (which is 2.5%) so we should add 22.5% + 2.5% = 25%*/ /*NOTE: Same explanation Apply to the rest of the animation here for the total of 0% - 100% */ 47.5%{ left: -100%; } 50%{ left: -200%; } 72.5%{ left: -200%; } 75%{ left: -300%; } 97.5%{ left: -300%; } 100%{ left: -400%; } } Here is the project file for this, with explanation. codepen.io/anon/pen/qLdwxr?editors=0100

@@richardramos7267 May you and your family lives a long and happy life.

@@richardramos7267 bro do you know how to minimize the size of the image? i want it to fit inside the container i made

google "codekky blog" for better explanation and tutorial

Because if you put a positive number instead of negative, then your left point perspective is going to move to right, while negative number, will move from left to negative left, which will reveal the other images that are on the right position. Here is an example illustration. As you can see, the screen area/visible area only see the img1. [SCREEN AREA.] [SCREEN AREA.] Now let's move 100% from left to left, which is negative 100%; [SCREEN AREA.] now img2 is visible [SCREEN AREA.] now move -200%; [SCREEN AREA.] now img3 is visible [SCREEN AREA.] now move -300%; [SCREEN AREA.] now img4 is visible [SCREEN AREA.] now move -400%; [SCREEN AREA.] now img5 is visible [SCREEN AREA.]

Please see my Bootstrap slider video as it is easier to have controls.