x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-04-02 16:30:12 +03:00 committed by GitHub
parent 979c97d087
commit a8210e6f42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 62 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
100_projects/40-carousel-image-vanilla-js/01.avif Normal file
View File

Binary file not shown.

BIN
100_projects/40-carousel-image-vanilla-js/02.avif Normal file
View File

Binary file not shown.

BIN
100_projects/40-carousel-image-vanilla-js/03.avif Normal file
View File

Binary file not shown.

BIN
100_projects/40-carousel-image-vanilla-js/04.avif Normal file
View File

Binary file not shown.

20
100_projects/40-carousel-image-vanilla-js/index.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Carousel</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="carousel">
<div class="image-container" id="imgs">
<img src="01.avif"alt=""/>
<img src="02.avif"alt=""/>
<img src="03.avif"alt=""/>
<img src="04.avif"alt=""/>
</div>
</div>
</body>
</html>

14
100_projects/40-carousel-image-vanilla-js/script.js Normal file
View File

@ -0,0 +1,14 @@
const imgs = document.getElementById("imgs");
const img = document.querySelectorAll("#imgs img");
let index = 0;
function run() {
index++;
if (index > img.length - 1) {
index = 0;
}
imgs.style.transform = `translateX(${-index * 500}px)`;
}
setInterval(run, 2000);

28
100_projects/40-carousel-image-vanilla-js/style.css Normal file
View File

@ -0,0 +1,28 @@
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
margin: 0;
min-height: 100vh;
background: #E6E6FA;
}
.carousel {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
overflow: hidden;
height: 500px;
width: 350px;
}
.image-container {
display: flex;
transition: transform 0.5s ease-in-out;
transform: translateX(0);
}
img {
object-fit: cover;
height: 500px;
width: 500px;
}