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;
}
}
Top comments (0)