No projeto mobile do figma, o carrossel fiava diferente de como ficou no resultado final do curso.
No figma o carrossel aparecia metade de um livro, depois um livro inteiro, depois metade do próximo. No nosso projeto final ficaram aparecendo os 3 livros inteiros.
Como seria possível mudar essa apresentação pra ficar como o do figma?
Oi, Dimas, tudo bem?
Para que o código fique mais próximo ao design do Figma, podemos alterar no arquivo "index.html" o script do swiper. Alterando a propriedade slidesPerView para 2.5 para garantir que os livros fiquem pela metade e podemos adicionar a propriedade centeredSlides com valor true com isso sempre o livro central ficará completo e os das laterais ficarão pela metade. Ficaria assim:
<script>
const swiper = new Swiper('.swiper', {
spaceBetween: 10,
slidesPerView: 2.5,
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
});
</script>
O resultado inicialmente será um espaço em branco ao lado do primeiro livro, mas a medida que você arrastar os livros você perceberá que o comportamento será muito próximo ao planejado no FIgma.
Lembre-se que nem sempre será possível realizar todas as ideias contidas no design do projeto e sempre há margem para negociar os estilos, funcionalidades e outras partes que compõem a aplicação. Entretanto, espero que com essas alterações você consiga o resultado esperado.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!