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 :}