Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Não aparecem as setinhas

Olá, boa tarde... Não estou conseguindo pôr as setinhas. Poderiam verificar onde está o erro?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
    <link rel="stylesheet" href="css/libs/materialize.min.css">
    <link href="css/libs/google-fonts.css" rel="stylesheet">
    <link rel="stylesheet" type="css" href="//cdn.jsdelivr.net/jquery.slick/1.8.0/slick.css"/>
   <link href="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>
    <script src="slick/slick.min.js"></script>    


</body>
</html>

No css:

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


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

.imagem-jogo {
    border: 2px solid gray;
}

.slider{
    height: auto;
}



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

No JS:

$(function (){
    $(".slider").slick({

  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
    });

});
2 respostas
solução!

Oi Luana, tudo bem? Desculpa, mas quais setinhas? A do próprio Slick? Se for, você precisa fazer o import do css do Slick também, será só isso?

Até onde vi, esse link do CDN do CSS do Slick parace que não está mais funcionando. Você conseguiu esse link no curso?

Foi no curso sim. É isso . Obrigada! :)