Responsive Image Slideshow Using HTML & CSS Only | No JavaScript Free Download

Responsive Image Slider
Responsive Image Slider
Responsive Image Slider

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%;}
}

Leave a Reply

avatar
  Subscribe  
Notify of