Fala pessoal, estou tentando trocar a cor das setas do carrousel do Slick que não estão aparecendo. Já olhei meu código várias vezes e não encontro o erro.
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 href="css/index.css" rel="stylesheet" type="text/css">
<link href="slick/slick.css" rel="stylesheet" type="text/css">
<link href="slick/slick-theme.css" rel="stylesheet" type="text/css">
</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>Index.css
<!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 href="css/index.css" rel="stylesheet" type="text/css">
<link href="slick/slick.css" rel="stylesheet" type="text/css">
<link href="slick/slick-theme.css" rel="stylesheet" type="text/css">
</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>slider.js
$(function() {
$(".slider").slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
});Obrigado!
