Responsive Image Slideshow Using HTML & CSS Only

Hello Friend Today in this article we will learn how to create responsive image slider suing html and css without javascript. Here you can download image slider source code. lets start….

HTML

Put the html part in your page where you want to show your image slider.

<slider>
  <slide><p>Slide1</p></slide>
  <slide><p>Slide2</p></slide>
  <slide><p>Slide3</p></slide>
  <slide><p>Slide4</p></slide>
</slider>

CSS

put this css in your css files here you can change the width and height of the slider.

html,body
{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}

slider
{
	display:block;
	width:100%;
	height:400px;
	overflow:hidden;
	background:#333;
	position:absolute;
}

slider > *
{
	position:absolute;
	display:block;
	width:100%;
	height:400px;
	background:#333;
	animation:slide 12s infinite;
	overflow:hidden;
}

slide:nth-child(1)
{
	left:0;
	animation-delay:-1s;
	background-image:url(badrinath.jpg);
	background-position:center;
	background-size:cover;	
}


slide:nth-child(2)
{
	animation-delay:2s;
	background-image:url(gangotri.jpg);
	background-position:center;
	background-size:cover;	
}


slide:nth-child(3)
{
	animation-delay:5s;
	background-image:url(kedarnath.jpg);
	background-position:center;
	background-size:cover;	
}

slide:nth-child(4)
{
	animation-delay:8s;
	background-image:url(yamunotri.jpg);
	background-position:center;
	background-size:cover;	
}

slide p
{
	text-align:center;
	display:inline-block;
	width:100%;
	font-size:80px;
	margin-top:140px;
	color:#fff;
}

@keyframes slide
{
	0%{left:100%; width:100%;}
	5%{left:0%;}
	25%{left:0%;}
	30%{left:-100%; width:100%;}
	30.0001%{left:-100%; width:0%;}
	100%{left:100%; width:0%;}
}

Download Slider

Live Preview