Faire un carrousel imbriqué, avec l'élement actif plus grand et cent

Bonjour à tous ! Voilà plusieurs jours que je suis face à une impasse pour mon site internet, j'ai beau chercher à droite et à gauche, je n'arrive pas à trouver la solution. J'espère donc que quelqu'un ici pourra m'aider ! Alors voici le problème :
pour une de mes pages, j'essaie de faire un carrousel pour présenter mon matériel en photos : drone, camera et stabilisateur (j'ai donc 3 slides). Pour chacun de ces "slides", j'ai également 3 photos différentes de chaque (mon "carrousel imbriqué).
En plus de ces images, j'ai sur ma page un titre h1"Mon matériel", une desciption pour chaque catégorie de matériel et des flèches au format png (pour le carrousel de base et l'imbriqué).
Ce que j'aimerais faire c'est :
Présentation de base: mes trois éléments de matériel sont alignés sur la même page, mais ceux aux extrémités dépassent un peu de la page. lorsque je survol l'élément du milieu, il s'agrandit en son centre, les deux autres s'éloignent un peu et baisse de moitié en opacité, mon titre rétrécit et monte légèrement, ma descritpion apparaît du milieu de l'image vers le centre en augmentant en opacité petit à petit, mes deux petites flèche (pour l'élément en question ) apparaissent aussi mais du centre vers l'extrémité de l'image. les flèches pour changer de matériel (un peu plus grande que les autres) apparaissent également aux extrémités permettant de changer de catégorie de matériel.
Je voulais ensuite qu'en survolant l'élément de droite ou de gauche cela active le carrousel et donc l'autre matériel prend la place du milieu mais celui de gauche se retrouve à droite pour faire une boucle (vraiment désolée, je ne sais pas si je suis claire) seulement j'ai remarqué que le survol était assez mal géré alors j'ai décidé de remplacer le survol par un clique (d'ou les flèches). Donc si je clique sur l'élément de droite, il passe au centre, agrandit, avec son texte de description qui apparait en descendant ainsi que ses flèches et ainsi de suite de façon "infinit".
j'ai essayé plusieurs possibilité mais aucune ne fonctionne, la dernière étant avec swiper qui nne veut pas me mettre l'élément actif au milieu bien que j'ai essayé de le forcer avec "centeredslides", je pense que c'est le fait que j'ai que 3 éléments dans mon carrousel et que les 3 sont visibles à l'écran.
j'ai vraiment besoin de votre aide pour cette section, c'est en train de me rendre folle alors si quelqu'un sait comment faire cette présentation ou a une idée ou un conseil, je prends !
j'espère vraiment avoir pu vous décrire au mieux ce que je souhaite, je peux envoyer le design réalisé sur adobe xd si ça peut aider

Bonjour,
la demande est complexe, un exemple en ligne serait souhaitable. Soit de votre propre site en construction, soit d'ailleurs. Si on n'en trouve pas d'exemple sur le net, c'est peut-être que "ça ne se fait pas", pour de multiples raisons ; pour de multiples raisons qui n'ont parfois rien à voir avec la mode.

oui bien sûr, voici le design que j'ai créé sur XD : https://xd.adobe.com/view/5c3008b0-04fe-43ac-b45c-f1ef66869b02-0963/
il n'est pas totalement fonctionnel mais vous pourrez avoir une idée plus clair

Bonjour,

pour le code JS je t'encourage à regarder du côté de Van11y ou d'accessible-slick.
Pour les CSS, ça va être bien complexe et je suis assez éloigné de la réalisation de ce genre d'effet. Coverflow c'est différent de ce que tu veux faire... D'autres pourront probablement te mettre sur de bonnes pistes

Bonjour,

As tu du code JS/CSS/HTML à nous partager ?

Si je comprends bien, tu as 3 sections (drone, camera et stabilisateur) ? Dans ces 3 sections, il y a un autre carrousel (3 photos du matériel) ?

Merci à tous pour vos réponses !
Felipe merci je vais me renseigner dès demain.
Niuxe, oui c'est exactement ça ! Jusqu'ici j'ai presque réussi à le faire avec swiper sauf que le carrousel principal ne fonctionne pas correctement avec la flèche de droite, il me manque toujours une l'image de droite ou alors mon élément actif (celui que j'agrandis) se retrouve sur la gauche ..
Je n'ai pas mon pc à disposition je mettrais les codes un peu plus tard dans la soirée, merci beaucoup en tout cas !

Alors voilà mes codes :
html
<!-- À propos de mon matériel -->
<section id="materiel">
<div class="swiper-container" id="swiper-materiel">
<div class="swiper-wrapper">

<!-- CAMERA -->
<div class="swiper-slide materiel-slide" id="camera">
<div class="media-container">
<img class="media" src="Images site/Camera 1.jpg" alt="Panasonic Lumix GH5" />
<div class="nav-arrows">
<img src="Images site/Flèche Gauche.png" class="prev-img" alt="prev" />
<img src="Images site/Flèche Droite.png" class="next-img" alt="next" />
</div>
</div></div>
<div class="description">
<p class="desc">Panasonic Lumix GH5<br><span>Pour toutes prises de vue grâce à<br> mes deux objectifs</span></p></div>


<!-- DRONE -->
<div class="swiper-slide materiel-slide" id="drone">
<div class="media-container">
<img class="media" src="Images site/Drone 1.jpg" alt="Drone DJI Mini 2" />
<div class="nav-arrows">
<img src="Images site/Flèche Gauche.png" class="prev-img" alt="prev" />
<img src="Images site/Flèche Droite.png" class="next-img" alt="next" />
</div>
</div></div>
<div class="description">
<p class="desc">Drone DJI Mini 2<br><span>Pour des prises de vues aériennes uniques<br>(hors agglomération)</span></p></div>


<!-- STABILISATEUR -->
<div class="swiper-slide materiel-slide" id="stab">
<div class="media-container">
<img class="media" src="Images site/Stabilisateur 1.jpg" alt="DJI Ronin-SC" />
<div class="nav-arrows">
<img src="Images site/Flèche Gauche.png" class="prev-img" alt="prev" />
<img src="Images site/Flèche Droite.png" class="next-img" alt="next" />
</div>
</div>
</div>
<div class="description">
<p class="desc">Stabilisateur DJI Ronin-SC<br><span>Pour plus de sécurité et fluidité<br> dans les prises de vue</span></p></div>


</div>
<!-- Navigation principale -->
<div class="swiper-button-next swiper-materiel-next"></div>
<div class="swiper-button-prev swiper-materiel-prev"></div>
<div class="swiper-pagination swiper-materiel-pagination"></div>
</div>
</section>

css :
#materiel {
width: 100%;
height: 100vh;
background-image: url(Images%20site/BG.png);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden; /* Éviter les débordements */
text-align: center;}

#materiel #swiper-materiel {
width: 100%;
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-top: 5%;
}
.media-container .media {
width: 450px;
height: 280px;
}


#materiel #swiper-materiel .swiper-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}

#swiper-materiel .swiper-slide {
opacity: 0.5;
transition: transform 1s ease-in-out, opacity 1s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
max-width: 30%;
height: 337px;
margin: 0 10%;
}

#swiper-materiel .swiper-slide-active {
transform: scale(1.3);
opacity: 1;
}

#swiper-materiel .swiper-slide-active .media-container {
border: 4px solid white;
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
border-radius: 54px;
}


#swiper-materiel .nav-arrows {
position: absolute;
width: 100%;
display: flex;
justify-content: space-between;
top: 50%;
transform: translateY(-50%);
}


.media-container .media {
width: 100%;
height: 100%;
border-radius: 54px;
}


#swiper-materiel .nav-arrows img {
width: 50px;
cursor: pointer;
}




#swiper-materiel .swiper-wrapper .description {
position: absolute;
opacity: 0;
transform: translateY(-100px);
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
font-family: "Colonna MT";
font-size: 2rem;
font-weight: lighter;
display: block;
width: 100%;
}


.desc span {
position: absolute;
font-family: "Monotype Corsiva";
font-size: 1.3rem;
display: block;
width: 100%;
}



#swiper-materiel .swiper-slide-active .desc {
opacity: 1;
transform: translateY(0);
}

Js :
document.addEventListener("DOMContentLoaded", function () {
const secondswiper = new Swiper("#swiper-materiel", {
slidesPerView: 3,
centeredSlides: true,
loop: true,
spaceBetween: 1,
watchSlidesProgress: true,
wachSlidesVisibility: true,
navigation: {
nextEl: ".swiper-materiel-next",
prevEl: ".swiper-materiel-prev",
},
pagination: {
el: ".swiper-materiel-pagination",
clickable: true,
},
});

// Gestion du changement d'image à l'intérieur des slides
document.querySelectorAll(".media-container").forEach((container) => {
const mediaElement = container.querySelector(".media");
const slide = container.closest(".materiel-slide");
const id = slide.id;
const images = {
camera: ["Images site/Camera 1.jpg", "Images site/Camera 2.jpg", "Images site/Camera 3.png"],
drone: ["Images site/Drone 1.jpg", "Images site/Drone 2.jpg", "Images site/Drone 3.jpg"],
stab: ["Images site/Stabilisateur 1.jpg", "Images site/Stabilisateur 2.jpg"],
};

let currentIndex = 0;

container.querySelector(".prev-img").addEventListener("click", () => {
currentIndex = (currentIndex === 0) ? images .length - 1 : currentIndex - 1;
mediaElement.src = images [currentIndex];
});

container.querySelector(".next-img").addEventListener("click", () => {
currentIndex = (currentIndex === images .length - 1) ? 0 : currentIndex + 1;
mediaElement.src = images [currentIndex];
});
});
});

je ne sais pas si vous pourrez le visualiser mais si oui, vous verrez que ce n'est pas toujours fonctionnel, certaines fois il y a mes 3 images, d'autre seulement deux