Responsive Image Slider Using Pure CSS (Animation)

Hi Friends,
I am Jeykumar M,
I am the co-founder and member of W3Farmers,
and frontend / UI / UX Designer and Developer at w3farmers.

w3farmers channel is giving you a videos of landing (welcome) page, website design and development, website sections like top and side navbars (fixed navbar, transparent navbar, animated navbars, responsive navbars), dropdown menu using only css, and javascript, testimonials, login pages, contact pages, blog pages design and development, image slider or slideshow or carousels, and css tips tricks and techniques, responsive web design, boostrap, font-awesome, google fonts, jquery and more stuffs....

We gives you a series of web design and development tutorials for free,
website pages design, html and css basics has been going now,

Today,
In this video,
i described you "How To Create Responsive Image Slider Or Carousel Or Slideshow Using Only CSS Animation".

after you completely watching this video, you can get the knowledge about basic css selectors and html tags, some css transform property and its methods, some css keyframe animation ( @keyframes ), how to create a frames in keyframes with the percentage unit ( for example, 0%, to100%), css percentage units, pixel units, css relative positioning, css absolute positioning, css animation property with animation-name, animation-duration, animation-iteration-count and how to use these three animation properties to single line ( animation: animationname time-duration( s - seconds | ms - milli seconds ) iteration-count( infinite | integervalue (1) ) ), internal styling ( using the style tag and style tag should be belonging to the head tag ), css overflow hidden property, css white-space:nowrap property, css floating layout ( float : left ) and how to use emmet in Brackets text editor.

Steps To Create a Responsive Image Slider,

1. open the text editor as your wish, Brackets is the text editor That i am using in this video.

2. create newfile and save it with .html extension, for example ( reponsiveslider.html )

3. put the tags those are wanted to create a responsive image slider, if your text editor have installed the emmet plugin then, just type '!' and press tab, emmet creates default html boilerplate template. now, we want to put our html tags they are div with ( slider-outer class ) , div with ( slider-inner ), and 3 image tags to slide the images.

4. now styling part begins, in between the style tag, we are going to put our styles to build a image responsive slider.
i. give the html and body , height to 100% to take 100% of the device, then, body element defaultly have some margin so, i give margin to 0 for cool look..
ii. now, jumpnig to .slider-outer, this element wants 3 properties. 1. relative positioning because, it contains the element ( .slider-inner ) that would be absolute positioning, overflow:hidden because .slide-inner would have the width 300% of its parent. i mean, slide-inner contains 3 images, each image have width 100% of .slider-outer and 33.3333% .slider-inner because slide-inner have width, 3 times of .slider-outer, and it would be floating left, so, initially we should see only first image, other two should be hidden. height 100% to take its parent's height ( body ).
iv. .slider inner have 300% of width, and position:absolute, whitespace :nowrap used to avoid the image floating to next row or line, and animation property for sliding images.
v. image tag have 2 properties, they are. height is 33.3333% and float left.
vi. finally, animation part, keyframes slide have 9 frames,
first two frames ( 0% to 24% ) have left:0, that means 2nd and 3rd images hides, 1st image shows,
second two frames ( 25% to 49% ) have left-100% , that means 1st and 3rd images hides, 2nd image shows,
third two frames ( 50% to 74% ) have left--200%, that means 1st and 2nd images hides, 3 image shows,
fourth two frames ( 75% to 99% )have left--100%, that means 1st and 3rd images hides, 2nd image shows,
last one frame ( 100% ) have left - 0, that means 2nd and 3rd images hides, 1st image shows

#w3farmers_landing_pages
#w3farmers_css_practices

Any Queries please give it on the comment box below!