Entrar Ainda não tem acesso?
5
respostas

Por que o carrossel não funciona?

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS

por André De França Nunes
| 52k xp | 17 posts
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./src/styles.css">
  <script src="./src/script.js" defer></script>
  <title>Slider</title>
</head>
<body>
  <div class="container-slider">
    <button id="prev-button"><img src="./public/images/arrow.png" alt="prev-button"></button>
    <div class="container-images">
      <img src="./public/images/r1.jpeg" alt="roupas" class="slider on">
      <img src="./public/images/r2.jpeg" alt="girl" class="slider">
    </div>
    <button id="next-button"><img src="./public/images/arrow.png" alt="next-button"></button>
  </div>
</body>
</html>
const slider = document.querySelectorAll('.slider');
const btnPrev = document.getElementById('prev-button');
const btnNext = document.getElementById('next-button');

let currentSlide = 0;

function hideSlider() {
  slider.forEach(item => item.classList.remove('on'))
}

function showSlider() {
  slider[currentSlide].classList.add('on')
}

function nextSlider() {
  hideSlider()
  if(currentSlide === slider.length -1) {
    currentSlide = 0
  } else {
    currentSlide++
  }
  showSlider()
}

function prevSlider() {
  hideSlider()
  if(currentSlide === 0) {
    currentSlide = slider.length -1
  } else {
    currentSlide--
  }
  showSlider()
}

btnNext.addEventListener('click', nextSlider)
btnPrev.addEventListener('click', prevSlider)
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container-slider {
  display: flex;
  width: 100%;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.container-images {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 700px;
}

.slider {
  opacity: 0;
  transition: opacity .2s;
  position: absolute;
  width: 100%;
  border-radius: 10px;
}

.on {
  opacity: 1;
}

#prev-button, #next-button {
  width: 30px;
  height: 30px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

#prev-button img, #next-button img {
  width: 100%;
  height: 100%;
}

#prev-button {
  transform: rotate(180deg);
}
5 respostas
por Victor Hugo Micco De Araújo
| 27.6k xp | 5 posts
Software Developer

Opa, beleza? Cara, então, a sua estrutura HTML e a logica do js parecem estar corretas, mas tem um pequeno problema no seu CSS. Você está definindo a classe .slider com position: absolute, q remove os elementos do fluxo normal do documento e posiciona em relação ao pai posicionado mais próximo.

Para corrigir isso, você pode ajustar o posicionamento das imagens dentro da div .container-images. Aqui embaixo vou deixar o que eu adicionaria como propriedade nessas classes Código CorrigidoEspero ter ajudado!

por André De França Nunes
| 52k xp | 17 posts

Boa tarde, tudo bem? Obrigado pelo retorno, acabei de achar o erro. Nome do arquivo era style e eu escrive styles. Obrigado pelo retorno.

por Victor Hugo Micco De Araújo
| 27.6k xp | 5 posts
Software Developer

Boa tarde, tudo sim! Que bom que solucionou o problema. Bons estudos!

por André De França Nunes
| 52k xp | 17 posts

Boa tarde novamente! Seria muito difícil de integrar esse projeto ao código que te enviei? eu estou tentando criar um site de vendas apenas para fins de estudos, eu gostaria que o formato do carrossel que te enviei fosse implementado a este HTML. Seria mais fácil criar algo do zero ou uni-los? Obrigado

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loja Chachaça - Produtos</title>
    <link rel="stylesheet" href="teste.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="testeindex.html">Home</a>
            <a class="cabecalho__menu__link" href="aboutindex.html">Sobre mim</a>
            <a class="cabecalho__menu__link" href="productsindex.html">Produtos</a>
            <a class="cabecalho__menu__link" href="contact.html">Contato</a>
        </nav>
    </header>
    <main class="inicio">
        <section class="inicio__pagina">
            <h1 class="inicio__pagina__nomeloja">Produtos</h1>
            <div class="produtos">
                <div class="produto">
                    <h2 class="produto__nome">Old Panther</h2>
                    <img src="old.jpg" alt="Old Panther">
                    <p class="produto__descricao">Cachaça artesanal produzida com métodos tradicionais.</p>
                    <p class="produto__preco">R$ 30,00</p>
                </div>
                <div class="produto">
                    <h2 class="produto__nome">Old Red Eye</h2>
                    <img src="eye.jpg" alt="Old Red Eye">
                    <p class="produto__descricao">Cachaça envelhecida em tonéis de carvalho, com sabor único.</p>
                    <p class="produto__preco">R$ 40,00</p>
                </div>
            </div>
            <div class="botao-container">
                <button class="botao" id="anterior">Anterior</button>
                <button class="botao" id="proxima">Próxima</button>
            </div>
        </section>
        
    </main>
    <footer class="rodape">
        <p>Desenvolvido por André França.</p>
    </footer>

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

@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    /* height: 100vh; */
    background: black;
    color: white;
}

.cabecalho {
    padding: 2% 0% 0% 15%;
}

.cabecalho__menu {
    display: flex;
    gap: 80px;
}

.cabecalho__menu__link {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #22d4fd;
    text-decoration: none;
}

.inicio {
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
 
.inicio__destaque {
    color: aqua;
}

.inicio__pagina {
    width: 600px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.inicio__pagina__nomeloja {
    font-size: 36px;
    font-weight: 800;
    font-family: "Krona One", sans-serif;
}

.inicio__pagina__nomeloja__descricao {
    font-size: 24px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
}

.descricao_nome{
    color: aqua;
}
    
.img_logo {
    border: 3px solid #22d4fd;
    border-radius: 5%;
    height: 400px;
    width: 400px;
} 

img {
    height: 400px;
    width: 280px;
    border-radius: 3%;
}

.inicio__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    justify-content: space-between;
}

.inicio__links__subtitulo {
    font-family: 'Krona one', sans-serif;
    font-weight: 400;
    font-size: 12px;
}

.inicio__links__link {
    border: 2px solid #22d4fd;
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    color: white;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
}

/* Adicione esta classe no seu arquivo CSS */
.inicio__links__link img {
    width: 32px;
    height: 33px;
}

.inicio__links__link:hover {
    background-color: #272727;
}

.rodape {
    padding: 24px;
    text-align: center;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;
    background-color: #22d4fd;
}

.bebida {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    
}

eu gostaria de inserir esse formato de carrossel

por Victor Hugo Micco De Araújo
| 27.6k xp | 5 posts
Software Developer

Integrar o carrossel no seu projeto é tranquilo e pode até melhorar a experiência na página de produtos. Você pode combinar os elementos do seu HTML com o código do carrossel que já tem.

É só fazer assim:

Coloque o HTML do carrossel na seção de produtos, substituindo o que já está lá, se necessário. Adicione as classes CSS e IDs necessários para garantir que tudo se alinhe direitinho. Fique de olho para evitar conflitos de estilo entre o CSS do carrossel e o que já está aplicado. Depois de inserir o código do carrossel após o conteúdo existente na seção de produtos no HTML, ajuste o CSS conforme necessário para garantir que ele se encaixe bem no layout do site.

Se precisar de ajuda durante o processo, é só dar um toque!