Minimalist CSS Image Carousel Tutorial
In this video, We'll show you how to create a minimalist design image carousel with pure CSS in just a few minutes. Let’s check it out! (Full source code at the end of this post)
Image carousel (or some would call “image slider”) is an awesome way to display set of images on your website. In this video, We'll show you how to create a minimalist design image carousel with pure CSS in just a few minutes. Let’s check it out! (Full source code at the end of this post)
🔔 Subscribe: https://www.youtube.com/channel/UCRthRrv06q1iOl86-tTKJhg
Source Code
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="slider">
<div class="slide">
<img src="logo1.png" />
<img src="logo2.png" />
<img src="logo3.png" />
<img src="logo4.png" />
<img src="logo5.png" />
<img src="logo6.png" />
<img src="logo7.png" />
</div>
<div class="slide">
<img src="logo1.png" />
<img src="logo2.png" />
<img src="logo3.png" />
<img src="logo4.png" />
<img src="logo5.png" />
<img src="logo6.png" />
<img src="logo7.png" />
</div>
</div>
</div>
</body>
</html>
CSS
html,body {
margin: 0;
width: 100%;
height: 100%;
}
body {
background: #ddd;
}
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider {
width: 1000px;
height: 100px;
position: relative;
background: white;
box-shadow: 0 10px 20px -10px rgba(0,0,0,0.2);
display: flex;
overflow: hidden;
}
.slide {
height: 100px;
display: flex;
align-items: center;
animation: slideshow 8s linear infinite;
}
.slide img {
height: 70px;
padding: 0 30px 0 30px;
}
@keyframes slideshow {
0% {transform: translateX(0);}
100% {transform: translateX(-100%);}
}
.slider::before, .slider::after {
height: 100px;
width: 200px;
position: absolute;
content: "";
background: linear-gradient(to right, white 0%, rgba(255,255,255,0) 100%);
z-index: 2;
}
.slider::before {
left: 0;
top: 0;
}
.slider::after {
right:0;
top:0;
transform: rotateZ(180deg);
}
Bootstrap 5 Complete Course with Examples
Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners
Nest.JS Tutorial for Beginners
Hello Vue 3: A First Look at Vue 3 and the Composition API
Building a simple Applications with Vue 3
Deno Crash Course: Explore Deno and Create a full REST API with Deno
How to Build a Real-time Chat App with Deno and WebSockets
Convert HTML to Markdown Online
HTML entity encoder decoder Online
HTML and CSS Tutorial for Beginners | HTML and CSS | HTML CSS Tutorial
HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.
HTML and CSS Tutorial for Beginners | HTML and CSS | HTML CSS Tutorial
HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.
Creating a CSS Visual Cheatsheet
The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.
Know Everything About HTML With HTML Experts
HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.
RESPONSIVE Personal PORTFOLIO Website HTML CSS And JAVASCRIPT
Responsive Personal Portfolio Website using HTML CSS & JavaScriptImages: https://bit.ly/353QF2ZDemo: https://edem-portfolio.netlify.app/Source Code: https://...