No entanto, considerando o fato de que o CSS é carregado em uma página da web mais rapidamente do que o JavaScript, e o CSS também causa menos refluxo em uma página (o que melhora o desempenho), é justo dizer que devemos usar CSS para interatividade sempre que possível.
1. Layout com HTML
O layout do nosso controle deslizante fácil é simples: criaremos um carousel-container div para segurar o carousel-slide elementos.
1 |
|
2 |
|
3 |
... |
4 |
|
Isso é tudo que precisamos, então vamos passar para o estilo
2. Comportamento do carrossel com CSS
Depois de configurar os slides do carrossel, estilizaremos o carrossel para ter os seguintes recursos:
- Conteúdo rolável
- Passar para o próximo slide
- Barra de progresso indicando o progresso do slide
Conteúdo rolável
Para o conteúdo rolável, usaremos o display:flex e overflow-x: auto propriedades. Também estilizaremos os slides para que possamos ver 3 slides na tela do desktop e 1 slide no celular.
1 |
.carousel-container { |
2 |
display: flex; |
3 |
overflow-x: auto; |
4 |
}
|
5 |
|
6 |
.carousel-slide { |
7 |
flex: 1 0 30%; |
8 |
}
|
9 |
|
10 |
@media (max-width: 600px) { |
11 |
.carousel-slide { |
12 |
flex: 1 0 90%; |
13 |
}
|
14 |
}
|
Ajustar ao slide
A seguir, para obter o efeito de encaixe nos slides, usaremos as propriedades CSS scroll-snap. As propriedades de snap de rolagem nos permitem definir pontos de “encaixe” em um elemento (o ponto do elemento que queremos que fique totalmente visível após a rolagem). Nosso código atualizado fica assim:
1 |
.carousel-container { |
2 |
display: flex; |
3 |
overflow-x: auto; |
4 |
scroll-snap-type: x mandatory; |
5 |
}
|
6 |
|
7 |
.carousel-slide { |
8 |
flex: 1 0 30%; |
9 |
scroll-snap-align: center; |
10 |
}
|
11 |
|
12 |
@media (max-width: 600px) { |
13 |
.carousel-slide { |
14 |
flex: 1 0 90%; |
15 |
}
|
16 |
}
|
Opcional: barra de progresso somente CSS
Para nos mantermos alinhados com nossa interatividade somente CSS, podemos aproveitar as vantagens dos recursos nativos do navegador para criar uma barra de progresso para nosso carrossel. Faremos isso estilizando a barra de rolagem do contêiner do carrossel para dar a aparência de uma barra de progresso. Esta é a aparência do código:
1 |
.carousel-container::-webkit-scrollbar { |
2 |
height: 8px; |
3 |
}
|
4 |
|
5 |
.carousel-container::-webkit-scrollbar-thumb { |
6 |
background: #29AB87; |
7 |
}
|
8 |
|
9 |
.carousel-container::-webkit-scrollbar-track { |
10 |
background: #b1b3b399; |
11 |
}
|
12 |
|
13 |
.carousel-container::-webkit-scrollbar-track-piece:start { |
14 |
background: #29AB87; |
15 |
}
|
Vejamos as propriedades que estamos usando:
-
::webkit-scrollbar: todo o elemento da barra de rolagem -
::webkit-scrollbar-thumb: a barra arrastável na barra de rolagem -
::webkit-scrollbar-track: o caminho em que o polegar da barra de rolagem está -
::webkit-scrollbar-track-piece:start: o caminho da trilha não coberto pelo polegar da barra de rolagem, o:startseletor direciona apenas o caminho atrás do polegar da barra de rolagem
No diagrama acima, podemos ver quais partes da barra de rolagem estão sendo direcionadas. Ao fazer o -webkit-scrollbar-thumb e ::webkit-scrollbar-track-piece:start da mesma cor, a barra de rolagem dá a impressão de ser preenchida à medida que é rolada, criando assim uma barra de progresso.
E como nossa barra de progresso é na verdade uma barra de rolagem, ela também pode ser usada para rolar pelo carrossel como um recurso adicional: é uma vitória/ganha!
O
::webkit-scrollbar As propriedades não são padrão, são bastante incompletas e não são suportadas por todos os navegadores, portanto, não é recomendado usar isso em um ambiente de produção. Isso significa que nossa barra de progresso se parecerá com uma barra de rolagem normal em navegadores não suportados ou se você optar por não incluí-las ::webkit-scrollbar regras.
Isso é tudo que existe em nosso controle deslizante fácil! Construímos um contêiner rolável com um recurso de ajuste bacana e até adicionamos uma barra de progresso usando apenas CSS:
3. Mais recursos com JavaScript
Como já eliminamos o recurso básico do carrossel, podemos adicionar ainda mais recursos, desta vez usando JavaScript.
Um desses recursos é o uso de setas para controlar a navegação do carrossel. Em um tutorial anterior, analisamos a construção de um carrossel com JavaScript (menos de 14 linhas de código!), para que possamos combinar esse tutorial com este para adicionar ainda mais recursos ao nosso controle deslizante fácil.
Esta é a aparência do nosso carrossel combinado:
Apenas por diversão, nesta demonstração o código foi refatorado para usar ainda menos linhas de JavaScript, então esta é a aparência da nossa função de seta do carrossel atualizada:
1 |
const carousel = document.querySelector(".carousel-container"); |
2 |
const slide = document.querySelector(".carousel-slide"); |
3 |
|
4 |
function handleCarouselMove(positive = true) { |
5 |
const slideWidth = slide.clientWidth; |
6 |
carousel.scrollLeft = positive ? carousel.scrollLeft + slideWidth : carousel.scrollLeft - slideWidth; |
7 |
}
|
Então passamos essa função para nossas setas HTML:
1 |
|
2 |
‹
|
3 |
|
4 |
|
5 |
|
6 |
›
|
7 |
|
E com isso, encerraremos o dia em nosso carrossel modificado!
