Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Olá, crianças inocentes! Hoje o desafio será construir um incrível Carousel, que é basicamente uma galeria de imagens que se move horizontalmente.

Mas por que um Carousel é importante em desenvolvimento web? Simples, ele permite exibir várias imagens em um espaço limitado, sem ocupar muito espaço na tela. Além disso, ele dá uma dinâmica interessante para a página, deixando-a mais interativa e atraente para o usuário.

Agora, algumas dicas para ajudá-los no desafio:

Para construir o Carousel, vocês precisarão utilizar o JavaScript para controlar o movimento das imagens, e o CSS para definir o layout e a aparência do componente.

Algumas propriedades CSS que podem ser úteis: display, position, overflow, transition e transform.

Já no JavaScript, vocês podem utilizar as funções setInterval e clearInterval para controlar o tempo e a velocidade das imagens. E também podem usar as funções getComputedStyle e setProperty para manipular as propriedades CSS das imagens.

Bom, crianças, agora é com vocês! Coloquem a criatividade em prática e construam um Carousel incrível para encantar os usuários da web.

Exemplo CPT2303121017-502x531

Additional tips

Código HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Image Carousel</title>
  </head>
  <body>
    <div class="carousel">
      <div class="image-container" id="imgs">
        <img src="imagem1.jpg"
       alt="first-image"
       />
    <img
       src="imagem2.jpg"
       alt="second-image"
       />
    <img
       src="imagem3.jpg"
       alt="third-image"
       />
    <img
       src="imagem4.jpg"
       alt="fourth-image"
       />
      </div>

      <div class="buttons-container">
        <button id="left" class="btn">Prev</button>
        <button id="right" class="btn">Next</button>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Equipe Vikings

Resultado

_C__Users_XNull_Desktop_Programa%C3%A7%C3%A3o_Desafios%20de%20Desenvolvimento%20Web_Desafio%2037_index html

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Image Carousel</title>
</head>

<body>
    <div class="carousel">
        <div class="left">
            <button id="prevBtn">&lt;</button>
        </div>
        <div class="row">
            <div class="image">
                <img src="https://picsum.photos/200/300/?random=1" alt="first-image" />
            </div>
            <div class="image">
                <img src="https://picsum.photos/200/300/?random=2" alt="second-image" />
            </div>
            <div class="image">
                <img src="https://picsum.photos/200/300/?random=3" alt="third-image" />
            </div>
            <div class="image">
                <img src="https://picsum.photos/200/300/?random=4" alt="fourth-image" />
            </div>
        </div>
        <div class="right">
            <button id="nextBtn">&gt;</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS

.carousel {
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 300px;
  margin: 0px auto;
}

.row {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
  scroll-behavior: smooth;
  gap: 5px;
}

.row .image {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;

  min-width: 220px;
  scroll-snap-align: start;

  box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.275);

  transition-duration: 0.2s;
}

.row img {
  width: 100%;
  height: 139px;
}

.left,
.right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#prevBtn,
#nextBtn {
  border: none;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  font-size: 24px;
  width: 40px;
  height: 40px;
  color: black;
  font-weight: 750;
}

#prevBtn {
  left: calc(100vw - 99vw);
}

#nextBtn {
  right: calc(100vw - 99vw);
}

#prevBtn:hover,
#nextBtn:hover {
  background-color: #003cff;
  color: white;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#prevBtn:active,
#nextBtn:active {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

JS

const carousel = document.querySelector(".row");
const prevBtn = document.querySelector("#prevBtn");
const nextBtn = document.querySelector("#nextBtn");

let scrollLeft = 0;

prevBtn.addEventListener("click", () => {
  scrollLeft -= carousel.offsetWidth;
  carousel.scrollTo({
    left: scrollLeft,
    behavior: "smooth",
  });
});

nextBtn.addEventListener("click", () => {
  scrollLeft += carousel.offsetWidth;
  carousel.scrollTo({
    left: scrollLeft,
    behavior: "smooth",
  });
});

EQUIPE RESISTECH Alunas: Lorenna e Simone

DESAFIO 37.zip

iurygdeoliveira / Web-development-classes

37º Desafio: Construindo um Carousel - Peso 1 #42