Image Slider using SVG and CSS

This tutorial blog to learn how to create animated image slider using CSS and SVG.

Video tutorial of Image Slider using SVG and CSS | Animated Banner Image Slider using SVG and CSS

This tutorial video to learn how to create animated image slider using CSS and SVG.

Image Slider using SVG and CSS | Animated Banner Image Slider using SVG and CSS [Source Codes]

This source code can help you to create Image Slider using SVG and CSS | Animated Banner Image Slider using SVG and CSS

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<svg viewBox="0 0 1350 600">
	<g id="image_wrap">
		<image clip-path="url(#imagePath)" width="1350" height="600" xlink:href="images/pic1.jpg" />
		<image clip-path="url(#imagePath)" width="1350" height="600" xlink:href="images/pic2.jpg" />
		<image clip-path="url(#imagePath)" width="1350" height="600" xlink:href="images/pic3.jpg" />
	</g>
	<clipPath id="imagePath">
		<circle r="100" cx="100" cy="100" />
		<circle r="100" cx="650" cy="100" />
		<circle r="100" cx="1250" cy="100" />
		<circle r="100" cx="300" cy="300" />
		<circle r="100" cx="900" cy="300" />
		<circle r="100" cx="100" cy="500" />
		<circle r="100" cx="650" cy="500" />
		<circle r="100" cx="1250" cy="500" />
	</clipPath>
</svg>




</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #fff;
}

svg circle{
	animation:circleAnim 4s;
	animation-iteration-count: infinite;
	transform-origin: 50% 50%;
	transform-box:fill-box;
}

#image_wrap{
	animation:imageAnim 12s;
	animation-iteration-count: infinite;
	transform: translateX(0%);
}
#image_wrap image:nth-child(2){
	transform: translateX(100%);
}
#image_wrap image:nth-child(3){
	transform: translateX(200%);
}

@keyframes imageAnim{
	0%{
		transform: translateX(0%);
	}
	32.999%{
		transform: translateX(0%);
	}
	33%{
		transform: translateX(-100%);
	}
	65.999%{
		transform: translateX(-100%);
	}
	66%{
		transform: translateX(-200%);
	}
	99.999%{
		transform: translateX(-200%);
	}
	100%{
		transform: translateX(0%);
	}	
}

@keyframes circleAnim{
	0%{
		transform: scale(0);
	}
	50%{
		transform: scale(10);
	}
	100%{
		transform: scale(0);
	}
}

Image Slider using SVG and CSS

Video tutorial of Image Slider using SVG and CSS | Animated Banner Image Slider using SVG and CSS

Image Slider using SVG and CSS | Animated Banner Image Slider using SVG and CSS [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery