Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

10
respostas

slider não está funcionando...

fiz tudo como foi explicado na aula, mas não fica no formato carrocel...

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
      <!--Import materialize.css-->
    <link rel="stylesheet" href="css/libs/materialize.min.css">
      <!-- Import Google Material Icons -->
    <link href="css/libs/google-fonts.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

    <link href="css/index.css" rel="stylesheet">
  </head>
  <body>
    <section class="container">
      <h1 class="center titulo header">Alura typer</h1>
      <div class="slider">
            <img src="img/slide1.png" class="imagem-jogo">
            <img src="img/slide2.png" class="imagem-jogo">
            <img src="img/slide3.png" class="imagem-jogo">
      </div>
          <hr>
          <p class="flow-text center">Teste sua velocidade competindo contra seus amigos!</p>
        <div class="card">
        <div class="card-image">
               <!-- <img src="images/sample-1.jpg"> -->
        </div>
        <div class="card-content">
            <p>Placar dinâmico! Sincronizando com o servidor!</p>
        </div>
        <div class="card-action">
            <a href="principal.html">Experimente agora!</a>
        </div>
      </div>
      <div class="card">
      <div class="card-image">
               <!-- <img src="img/sl.jpg"> -->
      </div>
      <div class="card-content">
        <p>Frases aleatórias ou escolha diretamente em qual delas você quer competir!</p>
      </div>
      <div class="card-action">
        <a href="principal.html">Experimente agora!</a>
      </div>
      </div>

      <a class="waves-effect waves-light btn-large orange" id="botao-jogue" href="principal.html">Jogue agora!</a>
    </section>
    <script src="js/jquery.js"></script>
    <script src="slick/slick.min.js"></script>
    <script src="js/slider.js"></script>
  </body>
</html>
10 respostas

slider.js

$(function() {
    $(".slider").slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        adaptiveHeight: true
    });      
});

index.css

.card{
    width: 49%;
    display: inline-block;
    vertical-align: top;
}


#botao-jogue{
    width: 150px;
    display: block;
    margin: 50px auto;
}

.slider {
    height: auto;
}

.slider-prev:before, .slick-next:before {
    color: black;
}

Oi, Rogers, tudo bem?

Testei o seus arquivos juntamente com o projeto base do curso. Você subiu o servidor para testar?

oi Lais! sim , estou com os dois servidores em pé

insira seu código aqui

oi Lais! sim , estou com os dois servidores em pé

insira seu código aqui

oi Lais! sim , estou com os dois servidores em pé

insira seu código aqui

Oi, Rogers, tudo bem?

Eu testei o código que foi compartilhado com o projeto base do curso e o slider foi carregado. Se quiser compartilhar o seu projeto no google drive para que possa baixar exatamente o que você está fazendo e entender o que pode estar acontecendo.

Fala ai Rogers, tudo bem? Como a Lais disse, compartilha com a gente o projeto completo, assim conseguimos simular o problema local e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Ficamos no aguardo.

Oi! Refiz todo o processo, assiti o vídeo da aula várias vezes e percebi que tem duas pastas slick, ao copiar e colar na pasta public a primeira pasta, dá esse erro, poderiam mudar o nome da primeira ou da segunda pasta para não dar essa confusão ( só sugestão rs), acho que foi esse o problema rsrs, pois o slider está funcionando agora. mesmo assim, obrigado!

insira seu código aqui

Oi, Rogers!

Que bom que o erro foi solucionado e obrigada pelo feedback, iremos revisar o que você relatou sobre as pastas!

Bons estudos :}