levxyca / carrossel

🖲️ Um carrossel feito com JavaScript

Carrossel

Um carrossel feito com JavaScript.

1. Processo de Desenvolvimento
2. Glossário

Processo de Desenvolvimento

1. Criação da parte visual do projeto com HTML/CSS
2. Estrutura da lógica do carrossel
   • Uma lista com as reviews
   • Botões para frente > e para trás <
   • Botão de surpresa surprise me

Lista de reviews

Para criamos a nossa lista de reviews iremos trabalhar com objetos.

1 objeto = Um review = Imagem, Nome, Profissão, Review

let review = {
    img: "valor",
    nome: "valor",
    profissão: "valor",
    review: "valor",
}

Agora, iremos criar um array de objetos.

let reviews = [
    {
        img: "valor",
        nome: "valor",
        profissão: "valor",
        review: "valor",
    },
    {
        img: "valor",
        nome: "valor",
        profissão: "valor",
        review: "valor",
    }
]

Botões

Precisaremos pegar os dados de um dos objetos de dentro do nosso array e mostrar eles no HTML.

nome.textContent = reviews[4].nome;
occupations.textContent = reviews[4].profissão;
review.textContent = reviews[4].review;

Para alterar o src da nossa tag img iremos usar o método setAttribute.

element.setAttribute('src', 'outra_imagem.png');

Nos botões para frente e para trás, precisaremos andar pelo array de objetos.

• Pegar o nome atual mostrado no card de review

let nameActive = document.querySelector(".card__name").innerText;

• Pegar a posição atual do array usando o findIndex()

array.findIndex(function(currentValue, index, arr))

const index = reviews.findIndex( (element) => element.nome === 'B');

• Se andar pra trás -1, se andar pra frente +1

reviews[0]

No botão Surprise me precisaremos pegar o tamanho do nosso array e objetos e pegar um índice aleatório para mostrar os dados no HTML.

• Obtendo o tamanho do array

arr.length;

• Gerando um número inteiro aleatório entre dois valores

Math.floor(Math.random() * (max - min)) + min;

• EXTRA Fazendo com que o carrossel de reviews não pare quando chega no ponto inicial ou final do array de objetos.

  • Identificar o ponto inicial e final do nosso array;

  • Quando andarmos pelo array precisamos verificar se o índice atual é igual ao ponto inicial ou final;

  • Se o índice atual for igual ao ponto inicial:

    • Se a pessoa usuária querer andar para frente no array: andar para frente no array normalmente.
    • Se a pessoa usuária querer andar para trás no array: a gente vai partir para o ponto final do array.

  • Se o índice atual for igual ao ponto final:

    • Se a pessoa usuária querer andar para frente no array: a gente vai partir para o ponto inicial do array.
    • Se a pessoa usuária querer andar para trás no array: andar para trás no array normalmente.

Glossário

Objetos

Element.setAttribute()

Array.prototype.length

Math.random()

Array.prototype.findIndex()