WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Slider de cartes JavaScript
13756
webleb
Video
Publiez votre code
21
Recommandé
25 November 2025
Fusion de bâtons
5 January 2024
Page de chargement avec cercle rotatif
25 January 2026
Modèle HTML de joueur de jeu Ruffle Flash
index.html
Copy
Webleb
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Previous
Next
styles.css
Copy
:root { --scrollcolor: #fff; --scrollbackground: #141e27; } * { box-sizing: border-box; } html, body { padding: 0; margin: 0; height: 100vh; } body { background: #203239; } .title { font-size: 2.5rem; font-family: system-ui; line-height: 1.1; font-weight: 300; color: #fff; margin: 4rem auto 1rem; width: 85%; max-width: 1280px; } .slider { width: 85%; max-width: 1280px; margin: 0 auto; } .slider__content { overflow-x: scroll; scroll-snap-type: x mandatory; display: flex; gap: 1rem; padding-bottom: 1rem; scrollbar-color: var(--scrollcolor) var(--scrollbackground); } .slider__content::-webkit-scrollbar { height: 0.5rem; width: 0.5rem; border-radius: 1rem; background: var(--scrollbackground); } .slider__content::-webkit-scrollbar-thumb { border-radius: 1rem; background: var(--scrollcolor); } .slider__content::-webkit-scrollbar-track { border-radius: 1rem; background: var(--scrollbackground); } .slider__item { scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-end; min-width: 100%; width: 100%; border-radius: 0.25rem; overflow: hidden; position: relative; aspect-ratio: 1; } @media (min-width: 460px) { .slider__item { aspect-ratio: 0.6666666667; min-width: calc((100% / 2) - 2rem); } } @media (min-width: 940px) { .slider__item { min-width: calc((100% / 3) - 4rem); } } .slider__image { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } .slider__info { position: relative; padding: 4rem 2rem 2rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(32, 50, 57, 0)); } .slider__info h2 { color: #fff; font-family: system-ui; line-height: 1.1; font-weight: 300; font-size: 1.75rem; margin: 0; } .slider__nav { margin: 1rem 0 4rem; width: 100%; padding: 0; display: flex; justify-content: flex-start; gap: 1rem; align-content: center; align-items: center; pointer-events: none; } @media (min-width: 460px) { .slider__nav { justify-content: flex-end; } } .slider__nav__button { margin: 0; appearance: none; border: 0; border-radius: 2rem; background: #fff; color: #203239; padding: 0.5rem 1rem; font-size: 0.75rem; line-height: 1; pointer-events: none; transition: 0.2s ease-out; opacity: 0.25; } .slider__nav__button--active { opacity: 1; pointer-events: auto; cursor: pointer; }
main.js
Copy
// JS included in the html file