In this article, We will share tutorial How to Create Image Slider in HTML CSS. Here, we will create Image Slider using only HTML and CSS Also we will explain all you code of Our Image Slider. Here you will not learn to create a single image slider. Rather, You will learn to create many types of Image Slider.
Create Image Slider in HTML CSS
After reading this article completely, you will be able to create a good Image Slider. Therefore, you should read the entire article. Learn how to make Image Slider. Also, the source code of the image slider will be copied from here and can be used anywhere.
Image Slider Using Only HTML & CSS
1 2 3 4 5 6 7 8 | <div class="slider"> <div class="slideshow-container slide"> <img src="free1.png"/> <img src="free2.png"/> <img src="free3.png"/> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <style> body{padding: 10px;} /*slideshow styles*/ .slider { width: 625px; margin: 0 auto; overflow: hidden; border: solid 1px white; } .slideshow-container { width: 2500px; font-size: 0; transition: 1s ease; height: 225px; } .slideshow-container:hover { animation-play-state: paused; } img, .text-container { width: 625px; height: auto; display: inline-block; font-size: 16px; text-align: center; } .text-container { height: 225px; position: relative; } p { position: relative; top: -45%; padding: 5px; } .slide { animation: slide 20s ease infinite; } @keyframes slide { 0% { transform: translateX(0%); } 12.5% { transform: translateX(0%); } 25% { transform: translateX(-25%); } 37.5% { transform: translateX(-25%); } 50% { transform: translateX(-50%); } 100% { transform: translateX(0); } </style> |