Bonjour, je suis sur un projet html/css only et j'essaie d'adapter un carrousel trouvé sur internet, mon problème est que je n'arrive pas à adapter le css pour que mon carrousel fonctionne avec plus de 3 items (dans l'exemple prit sur internet il n'y a que 3 items dans le carrousel).
Voici le lien de la template prise sur internet: https://codepen.io/aybukeceylan/pen/RwrRPoO
Et voici mon code actuel:
<!-- HTML -->
<section id="carrousel">
<div class="contain">
<input type="radio" name="slider" id="item-1" checked>
{{ range $key, $value := (index .) }}
<input type="radio" name="slider" id="item-{{$key}}">
{{end}}
<div class="cards">
{{ range $key, $value := (index .) }}
<label class="card" for="item-{{$key}}" id="song-{{$key}}">
<img src="{{$value.Image}}"
alt="song">
</label>
{{end}}
</div>
<div class="player">
<div class="upper-part">
<div class="play-icon">
<svg width="20" height="20" fill="#2992dc" stroke="#2992dc" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="feather feather-play"
viewBox="0 0 24 24">
<defs />
<path d="M5 3l14 9-14 9V3z" />
</svg>
</div>
<div class="info-area" id="test">
{{ range $key, $value := (index .) }}
<label class="song-info" id="song-info-1">
<div class="title">{{$value.Id}}</div>
<div class="sub-line">
<div class="subtitle">{{$value.Name}}</div>
<div class="time">4.05</div>
</div>
</label>
{{end}}
</div>
</div>
<div class="progress-bar">
<span class="progress"></span>
</div>
</div>
</div>
</section>
<!-- CSS -->
#item-1:checked~.cards #song-3, #item-2:checked~.cards #song-1, #item-3:checked~.cards #song-2 {
transform: translatex(-40%) scale(0.8);
opacity: 0.4;
z-index: 0;
}
#item-1:checked~.cards #song-2, #item-2:checked~.cards #song-3, #item-3:checked~.cards #song-1 {
transform: translatex(40%) scale(0.8);
opacity: 0.4;
z-index: 0;
}
#item-1:checked~.cards #song-1, #item-2:checked~.cards #song-2, #item-3:checked~.cards #song-3 {
transform: translatex(0) scale(1);
opacity: 1;
z-index: 1;
}
#item-1:checked~.cards #song-1 img, #item-2:checked~.cards #song-2 img, #item-3:checked~.cards #song-3 img {
box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}
Le CSS est fait de sorte à ne fonctionner qu'avec 3 items et je cherche donc une solution pour faire en sorte que ce carrousel fonctionne avec une taille d'item prédéfinie (52)