its seems impossible to reproduce the carousel of clickup saas… Anyone can help me please ?
the carousel
https://clickup.com/
There is my actual code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.carousel-wrapper {
position: relative;
width: 70%;
margin: 0 auto;
display: flex;
align-items: center;
}
.carousel-container {
overflow: hidden;
width: 100%;
display: flex;
justify-content: center;
position: relative;
padding-left: 100px;
padding-right: 100px;
}
.carousel {
display: flex;
transition: transform 0.5s ease-in-out;
position: relative;
}
.carousel-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 30px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
opacity: 0.6;
transition: opacity 0.3s ease, transform 0.3s ease-in-out;
cursor: pointer;
width: 150px;
}
.carousel-item:hover {
transform: translateY(-5px);
}
.carousel-item.active {
opacity: 1;
transform: scale(1.1);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.fade-left, .fade-right {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
pointer-events: none;
}
.fade-left {
left: 0;
background: linear-gradient(to right, rgba(240, 240, 245, 1), rgba(240, 240, 245, 0));
}
.fade-right {
right: 0;
background: linear-gradient(to left, rgba(240, 240, 245, 1), rgba(240, 240, 245, 0));
}
.fa-duotone {
font-size: 50px;
color: #333;
}
</style>
</head>
<body>
<div class="carousel-wrapper">
<div class="fade-left"></div>
<div class="carousel-container">
<div class="carousel">
<div class="carousel-item"><i class="fa-duotone fa-solid fa-image"></i></div>
<div class="carousel-item"><i class="fa-duotone fa-solid fa-subtitles" style="--fa-primary-color: #000;"></i></div>
<div class="carousel-item"><i class="fa-duotone fa-solid fa-link"></i></div>
<div class="carousel-item"><i class="fa-duotone fa-solid fa-file-code"></i></div>
<div class="carousel-item"><i class="fa-duotone fa-solid fa-file-pen"></i></div>
<div class="carousel-item"><i class="fa-duotone fa-solid fa-wand-magic-sparkles"></i></div>
<div class="carousel-item"><i class="fa-duotone fa-solid fa-circle-question"></i></div>
<!-- Dupliquer les éléments pour créer un effet continu -->
<div class="carousel-item"><i class="fa-duotone fa-solid fa-image"></i></div>
<div class="carousel-item"><i class="fa-duotone fa-solid fa-subtitles" style="--fa-primary-color: #000;"></i></div>
<div class="carousel-item"><i class="fa-duotone fa-solid fa-link"></i></div>
<div class="carousel-item"><i class="fa-duotone fa-solid fa-file-code"></i></div>
<div class="carousel-item"><i class="fa-duotone fa-solid fa-file-pen"></i></div>
<div class="carousel-item"><i class="fa-duotone fa-solid fa-wand-magic-sparkles"></i></div>
<div class="carousel-item"><i class="fa-duotone fa-solid fa-circle-question"></i></div>
</div>
</div>
<div class="fade-right"></div>
</div>
<script>
const carousel = document.querySelector('.carousel');
const items = document.querySelectorAll('.carousel-item');
const visibleItems = 7; // Le nombre d'éléments visibles
let currentIndex = Math.floor(items.length / 3); // Index de l'élément central initial
function updateCarousel(newIndex) {
const middleIndex = Math.floor(visibleItems / 2);
const offset = newIndex - currentIndex;
if (newIndex < 0 || newIndex >= items.length) return;
const itemWidth = items[0].offsetWidth + 60;
// Déplacer le carrousel pour centrer le nouvel élément cliqué
carousel.style.transform = `translateX(${-(newIndex - middleIndex) * itemWidth}px)`;
// Mettre à jour la classe active
items[currentIndex].classList.remove('active');
items[newIndex].classList.add('active');
currentIndex = newIndex; // Mettre à jour l'index courant
}
// Ajouter l'événement de clic à chaque élément du carrousel
items.forEach((item, index) => {
item.addEventListener('click', () => {
updateCarousel(index);
});
});
// Initialiser la position du carrousel
items[currentIndex].classList.add('active');
carousel.style.transform = `translateX(${-(currentIndex - Math.floor(visibleItems / 2)) * (items[0].offsetWidth + 60)}px)`;
</script>
</body>
</html>
But i have already try many things.
So, to recap, I’m trying to create a carousel where 7 elements are visible at the same time, with the 4th element always centered. When a user clicks on an element to the right or left of the center, that element should move to take the central position. For example, if I click on an element that’s to the right of the center, that element should move to the center. The same behavior should occur if an element to the left of the center is clicked. The movement should be smooth and maintain the order of the elements, without scrolling through the entire carousel. Basically, just like ClickUp.
Thanks for any help !
Try & test
Moving Based on Initial and Target Index
Problem: Movement was fixed in increments of 7 items, causing inconsistent shifts and incorrect centering of items.
Absolute Pixel Calculation for Movement
Problem: Used fixed pixel values for movement, resulting in incorrect display and misalignment of centered items.
Using currentOffset for Position Calculation
Problem: Incorrect initial positioning led to misalignment and improper centering of items.
CSS Animation for Pixel Movement
Problem: CSS animations were out of sync with JavaScript calculations, causing display issues.
Recalculation Based on Clicks
Problem: Miscalculated the pixel movement needed, leading to improper centering and alignment.
Initial Centering with Movement Calculation
Problem: Incorrect initial centering resulted in the wrong element being centered and displayed.
Direct translateX Manipulation
Problem: Directly manipulating translateX with incorrect values led to inconsistent movement and centering.
And many other things…