Comment faire défiler les blocs de contenu gauche et droite dans css

Question

Je suis en train de créer un cadre de défilement sur une page Web. Le cadre est width: 90% de la largeur de la page.

J'ai un total de 7 blocs mais je veux seulement montrer 5 à la fois avec un gauche & bouton droit pour faire défiler vers la gauche et la droite. Chaque bloc est width: 18%

Quels sont les styles de CSS minimum que je devrais envisager pour commencer à construire cela?

Answer 1

Quels sont les styles de css minimum que je devrais envisager pour commencer à construire ?

Est-ce que vous essayez d'atteindre?

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    text-align: center; 
 
} 
 

 
.wrapper { 
 
    display: inline-block; 
 
    width: 90vw; 
 
    height: 100px; 
 
    background-color: lightgray; 
 
    padding: 16px 0; 
 
    overflow-x: scroll; 
 
    text-align: start; 
 
} 
 

 
.content { 
 
    display: inline-block; 
 
    height: 100%; 
 
    width: calc(90vw/5); 
 
    text-align: start; 
 
    float: left; 
 
} 
 

 
.content-wrapper { 
 
    height: 100%; 
 
    width: calc((90vw/5) * 7); 
 
    text-align: start; 
 
} 
 

 
.buttons-wrapper { 
 
    position: absolute; 
 
    width: 90vw; 
 
    height: calc(100px - 16px); 
 
} 
 

 
.left-button, 
 
.right-button { 
 
    position: absolute; 
 
    background-color: black; 
 
    width: 30px; 
 
    height: 30px; 
 
    top: calc(50% - 15px); 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
.left-button { 
 
    left: 0; 
 
} 
 

 
.right-button { 
 
    right: 0; 
 
}

<div class="wrapper"> 
 
    <div class="buttons-wrapper"> 
 
    <div class="left-button">L</div> 
 
    <div class="right-button">R</div> 
 
    </div> 
 
    <div class="content-wrapper"> 
 
    <div class="content" style="background-color: red"></div> 
 
    <div class="content" style="background-color: orange"></div> 
 
    <div class="content" style="background-color: yellow"></div> 
 
    <div class="content" style="background-color: green"></div> 
 
    <div class="content" style="background-color: lightblue"></div> 
 
    <div class="content" style="background-color: blue"></div> 
 
    <div class="content" style="background-color: violet"></div> 
 
    </div> 
 
</div>