How to make a slider?

Asked

Viewed 42 times

0

How can I make the squares stay in one line, generating one scroll horizontal, where I can navigate to the other blocks by sliding left or right.

    .box{
        width: 100px;
        height: 100px;
        display: inline-block;
    }

    .box:nth-child(1) { background: red; }
    .box:nth-child(2) { background: orangered; }
    .box:nth-child(3) { background: purple; }
    .box:nth-child(4) { background: yellow; }
    .box:nth-child(5) { background: green; }
    .box:nth-child(6) { background: black; }
    .box:nth-child(7) { background: orange; }
    .box:nth-child(8) { background: orangered; }
    .box:nth-child(9) { background: purple; }
    .box:nth-child(10) { background: yellow; }
    .box:nth-child(11) { background: red; }
<div class=itens>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

html css

  • this needs to be done in div with the style "items". if adding a display should work: .itens{ display: inline-flex;}

1 answer

1

In class items puts display:flex and overflow-x: auto, in this example I limited the width in 350px just so you can see the scroll turn up.

I also left some comments in the code below to help

.itens {
  overflow-x: auto; /*ativa o scroll horizontal caso necessário*/
  display: flex; /*coloca os elementos em linha*/
  width: 350px; /*limita a largura do container*/
}
.box{
  min-width: 100px;
  width: 100px;
  height: 100px;
}
.box:nth-child(1) { background: red; }
.box:nth-child(2) { background: orangered; }
.box:nth-child(3) { background: purple; }
.box:nth-child(4) { background: yellow; }
.box:nth-child(5) { background: green; }
.box:nth-child(6) { background: black; }
.box:nth-child(7) { background: orange; }
.box:nth-child(8) { background: orangered; }
.box:nth-child(9) { background: purple; }
.box:nth-child(10) { background: yellow; }
.box:nth-child(11) { background: red; }
<div class=itens>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.