Seção com Scroll Lateral Controlado por Botões ← →

Marcação

A sessão abaixo irá renderizar os cards que serão criados via Java Script:

HTML

<section id="scrollSection" class="scroll">

</section>

CSS

.scroll {
  background-color: black;
  padding: 50px;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap; 
}

Dentro da sessão abaixo teremos o painel que irá renderizar os botões que controlaram o Scroll Lateral do elemento scrollSection:

HTML

  <section id="panel" class="panel">
    <button id="back" class="btn">back</button>
    <button id="next" class="btn">next</button>
  </section>

CSS

.panel {
  display: flex;
  justify-content: space-between;
}

.btn {
  border-radius: 8px;
  background-color: rgb(168, 103, 228);
  padding: 8px;
  width: 50%;
}

Java Script

Dados:

A constante data armazenará as informações dos Cards a serem criados. Aqui trabalharemos apenas com as Cores:

const data = [

  {
    color: 'red',
  },

  {
    color: 'yellow',
  },

  {
    color: 'green',
  },

  {
    color: 'blue',
  },

  {
    color: 'white',
  },

  {
    color: 'orange',
  },

  {
    color: 'gray',
  },

  {
    color: 'brown',
  },

  {
    color: 'purple',
  },

];

Criando Cards:

A função createCard Cria um elemento div com a classe cards e irá inserir o Card dentro do elemento scrollSection:

const createCard = (color) => {
  const scrollSection = document.getElementById('scrollSection');
  const div = document.createElement('div');
  div.className = 'cards';
  div.style.backgroundColor = color;
  scrollSection.appendChild(div);
};

CSS:

.cards {
    width: 200px;
    height: 200px;
    border-radius: 15px;
    margin: 30px;
    display: inline-block;
}

Podemos usar o map para mapear o array e para cada Objeto dentro dele executar a função createCard passando como parametro o valor dentro da chave color do Objeto:

data.map(object => createCard(object.color));

Painel de controle:

Agora iremos configurar o addEventListener com duas conticionais referentes aos botões do painel.

Se o elemento clicado contém o id next a scrollSection irá se mover 500px para direita →

Se o id for back se movimentará 500px para esquerda ←

addEventListener('click', (event) => {
  if (event.target.id === 'next') {
    document.getElementById('scrollSection').scrollBy(500, 0);
  };
  if (event.target.id === 'back') {
    document.getElementById('scrollSection').scrollBy(-500, 0);
  };
})

Bônus

Sessão responsiva com Media Queries:

A sessão scrollSection só terá Scroll Lateral e o Painel só será visivel em telas Menores de 500px de largura

Para isso retira o white-space: nowrap; da classe scroll e adicione visibility: hidden; à classe panel,

E crie um Media Query com as seguintes configurações:

@media screen and (max-width: 500px) {

    .scroll {
        white-space: nowrap;
    }

    .panel {
        visibility: visible;
    }

}

Saiba Mais

scroll-behavior

white-space

Usando Media Queries

map()

scrollBy()