Skip to content

Commit 30f546d

Browse files
dev-shettydev-shetty
committed
ADD: Image Carousel II
1 parent 7733b94 commit 30f546d

File tree

4 files changed

+115
-13
lines changed

4 files changed

+115
-13
lines changed

‎Carousel II/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Carousel II</title>
9+
</head>
10+
<body>
11+
<main>
12+
<div class="grid-carousel">
13+
<!-- Generated in JS -->
14+
</div>
15+
</main>
16+
</body>
17+
<script src="./script.js"></script>
18+
</html>

‎Carousel II/script.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const carousel = document.querySelector(".grid-carousel")
2+
3+
const totalImages = 40
4+
5+
for (let i = 1; i <= totalImages; i++) {
6+
// Generating Images
7+
const div = document.createElement("div")
8+
div.classList.add("carousel-item")
9+
div.setAttribute("data-active", false)
10+
const img = document.createElement("img")
11+
img.setAttribute("src", `https://picsum.photos/400/400?random=${i}`)
12+
img.setAttribute("alt", `Image ${i}`)
13+
div.appendChild(img)
14+
15+
carousel.appendChild(div)
16+
17+
// Getting columns based on the total images
18+
// Currently for every 5 image 1 column is increased and 2 is by default
19+
const totalColumns = parseInt(totalImages / 5) + 2
20+
carousel.style.setProperty("--columns", totalColumns)
21+
}
22+
23+
const images = document.querySelectorAll(".carousel-item")
24+
25+
images.forEach((img) => {
26+
img.addEventListener("click", () => {
27+
const isActive = img.getAttribute("data-active")
28+
if (isActive === "false") {
29+
img.style.gridColumn = "span 2"
30+
img.style.gridRow = "span 2"
31+
img.setAttribute("data-active", true)
32+
} else {
33+
img.style.gridColumn = "span 1"
34+
img.style.gridRow = "span 1"
35+
img.setAttribute("data-active", false)
36+
}
37+
})
38+
})

‎Carousel II/style.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
html,
8+
body {
9+
min-height: 100%;
10+
}
11+
12+
body {
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
}
17+
18+
.grid-carousel {
19+
--columns: 6;
20+
--carousel-gap: 1vmin;
21+
--image-size: 5em;
22+
23+
padding: 1rem;
24+
max-width: calc(var(--columns) * var(--image-size));
25+
margin-inline: auto;
26+
display: grid;
27+
grid-template-columns: repeat(var(--columns), 1fr);
28+
gap: var(--carousel-gap);
29+
/* grid-auto-rows: var(--image-size); */
30+
grid-auto-flow: row dense;
31+
32+
transition: all 500ms ease-in-out;
33+
}
34+
35+
.carousel-item {
36+
/* width: var(--image-size); */
37+
width: 100%;
38+
aspect-ratio: 1;
39+
}
40+
41+
.carousel-item > img {
42+
max-width: 100%;
43+
display: block;
44+
object-fit: cover;
45+
}

‎README.md‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# CSS Is Fun
1+
# CSS Is Fun
22

33
### Yes! You heard it right CSS is awesome, That's great to hear! CSS is a powerful tool for designing and styling web pages this repository also contains UI snippets which are pre-built CSS code blocks that can be easily integrated into a website to add style and functionality.
44

@@ -27,24 +27,25 @@ To use these CSS animations and effects in your Local System , simply download o
2727

2828
## Snippets
2929

30-
| Project Name | CodePen Link | Preview | Source Code |
31-
| ------------ | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
32-
| Cart Item | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/9b12a923-f70a-411e-8964-0273e507576a" alt="Cart Item" width="400" height="400"> | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) |
33-
| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/18d4af5d-459e-4b45-8c51-aa253ff88da9" alt="Social Login" width="400" height="400"> | [Code - Social Login](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Social%20Login) |
34-
| Counter using Closure | [Go Live](https://codepen.io/pen/vYVjLqx) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/eefb6819-f21e-4b6b-8bcd-3a08368bcd51" alt="Counter" width="400" height="400"> | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) |
35-
| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/8417ccd9-8363-4d3f-920b-1b7013ba1158" alt="Accordion" width="400" height="400">| [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) |
36-
| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/07cf6fab-5941-44fa-8964-dc73175239a4" alt="3D Cube" width="400" height="400"> | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) |
37-
| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/477cc242-4b77-4e50-bcd7-d64cfce2ed34" alt="Festival Lighting" width="400" height="400"> | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) |
38-
| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/68843a36-a400-4e48-8907-435e68d8cdc0" alt="Indian Flag" width="400" height="400"> | [Code - Indian Flag](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Indian%20Flag) |
39-
| Image Carousel I | [Go Live](https://codepen.io/pen/gOBKRNV) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/5fc52924-7403-4178-a7ab-fc796cfab567" alt="Image Carousel I" width="400" height="400"> | [Code - Image Carousel I](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20I) |
30+
| Project Name | CodePen Link | Preview | Source Code |
31+
| --------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
32+
| Cart Item | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/9b12a923-f70a-411e-8964-0273e507576a" alt="Cart Item" width="400" height="400"> | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) |
33+
| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/18d4af5d-459e-4b45-8c51-aa253ff88da9" alt="Social Login" width="400" height="400"> | [Code - Social Login](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Social%20Login) |
34+
| Counter using Closure | [Go Live](https://codepen.io/pen/vYVjLqx) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/eefb6819-f21e-4b6b-8bcd-3a08368bcd51" alt="Counter" width="400" height="400"> | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) |
35+
| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/8417ccd9-8363-4d3f-920b-1b7013ba1158" alt="Accordion" width="400" height="400"> | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) |
36+
| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/07cf6fab-5941-44fa-8964-dc73175239a4" alt="3D Cube" width="400" height="400"> | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) |
37+
| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/477cc242-4b77-4e50-bcd7-d64cfce2ed34" alt="Festival Lighting" width="400" height="400"> | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) |
38+
| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/68843a36-a400-4e48-8907-435e68d8cdc0" alt="Indian Flag" width="400" height="400"> | [Code - Indian Flag](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Indian%20Flag) |
39+
| Image Carousel I | [Go Live](https://codepen.io/pen/gOBKRNV) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/5fc52924-7403-4178-a7ab-fc796cfab567" alt="Image Carousel I" width="400" height="400"> | [Code - Image Carousel I](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20I) |
40+
| Image Carousel II | [Go Live](https://codepen.io/pen/bGmjbVo) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/a8ef65b5-873c-4365-b4be-485bae463e87" alt="Image Carousel II" width="400" height="400"> | [Code - Image Carousel II](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20II) |
4041

41-
<br>
42+
<br>
4243

4344
<p align="center"><a href="#snippets">^^ Back to Snippets Top ^^</a></p>
4445

4546
## Contributing
4647

47-
We encourage your contributions. Welcome to CSS is Fun on GitHub! We're excited for your contributions, big or small. Join our inclusive community and work on various CSS tasks to improve design and functionality. Let's collaborate and make something great together!🚀 For detailed instructions on how to contribute, please refer to the CONTRIBUTING.md file.
48+
We encourage your contributions. Welcome to CSS is Fun on GitHub! We're excited for your contributions, big or small. Join our inclusive community and work on various CSS tasks to improve design and functionality. Let's collaborate and make something great together!🚀 For detailed instructions on how to contribute, please refer to the CONTRIBUTING.md file.
4849

4950
## License
5051

0 commit comments

Comments
 (0)