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-10 01:41:23 +03:00 committed by GitHub
parent 646a14c473
commit dadbecb5d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 116 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
100_projects/48-create-animated-image-carousel/imgs/01.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
100_projects/48-create-animated-image-carousel/imgs/02.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 418 KiB

BIN
100_projects/48-create-animated-image-carousel/imgs/03.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 862 KiB

BIN
100_projects/48-create-animated-image-carousel/imgs/04.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
100_projects/48-create-animated-image-carousel/imgs/05.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 666 KiB

36
100_projects/48-create-animated-image-carousel/index.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
<title>Document</title>
</head>
<body>
<section aria-label="Newest Photos">
<div class="carousel" data-carousel>
<button class="carousel-button prev" data-carousel-button="prev">&#8926;</button>
<button class="carousel-button next" data-carousel-button="next">&#8927;</button>
<ul data-slides>
<li class="slide" data-active>
<img src="imgs/01.jpg" alt="Nature Image #1">
</li>
<li class="slide">
<img src="imgs/02.jpg" alt="Nature Image #2">
</li>
<li class="slide">
<img src="imgs/03.jpg" alt="Nature Image #3">
</li>
<li class="slide">
<img src="imgs/04.jpg" alt="Nature Image #4">
</li>
<li class="slide">
<img src="imgs/05.jpg" alt="Nature Image #5">
</li>
</ul>
</div>
</section>
</body>
</html>

18
100_projects/48-create-animated-image-carousel/script.js Normal file
View File

@ -0,0 +1,18 @@
const buttons = document.querySelectorAll("[data-carousel-button]")
buttons.forEach(button => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]")
const activeSlide = slides.querySelector("[data-active]")
let newIndex = [...slides.children].indexOf(activeSlide) + offset
if (newIndex < 0) newIndex = slides.children.length - 1
if (newIndex >= slides.children.length) newIndex = 0
slides.children[newIndex].dataset.active = true
delete activeSlide.dataset.active
})
})

62
100_projects/48-create-animated-image-carousel/styles.css Normal file
View File

@ -0,0 +1,62 @@
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
}
.carousel {
width: 100vw;
height: 100vh;
position: relative;
}
.carousel > ul {
margin: 0;
padding: 0;
list-style: none;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: 200ms opacity ease-in-out;
transition-delay: 200ms;
}
.slide > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.slide[data-active] {
opacity: 1;
z-index: 1;
transition-delay: 0ms;
}
.carousel-button {
position: absolute;
z-index: 2;
background: none;
border: none;
font-size: 50px;
top: 50%;
transform: translateY(-50%);
color:#FFF;
cursor: pointer;
padding:0 5px;
background-color: rgba(0, 0, 0, .3);
}
.carousel-button:hover,
.carousel-button:focus {
color: white;
background-color: rgba(0, 0, 0, .2);
}
.carousel-button:focus {
outline: 1px solid black;
}
.carousel-button.prev {
left: 1rem;
}
.carousel-button.next {
right: 1rem;
}