Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Carrossel não funciona. Erros aparecem no console.

Referente ao curso jQuery: avance na biblioteca mais popular do mercado parte 2, no capítulo Plugins do jQuery e atividade Mãos na massa: Carrossel com slick

por Mariana
| 45.6k xp | 49 posts

Boa noite a todos,

Quando carrego a página no link http://localhost:3000/index.html o carrossel não aparece como deveria. Os seguintes erros aparecem no console.

Failed to load resource: the server responded with a status of 404 (Not Found)                       slick.min.js:1 
Uncaught TypeError: $(...).slick is not a function                                                      
    at HTMLDocument.<anonymous> (slider.js:2)
    at mightThrow (jquery.js:3508)
    at process (jquery.js:3576)                                                                               jquery.js:3793 
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT                                               newapp03.png:1

Segue o link para o arquivo do exercício: https://github.com/Marileal/aluratyperProblema Tem apenas as pastas relativas ao "public" pois a pasta "servidor" tinha muitas pastas para ser upado.

7 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Mariana, tudo bem? O problema está no caminho para importar o seu arquivo slick.min.js.

Seu código atual:

<script src="slick/slick.min.js"></script>

Mas, a pasta slick está dentro de uma pasta chamada slick-1.6.0, então o caminho de importação completo deveria ser:

<script src="slick-1.6.0/slick/slick.min.js"></script>

Acho que essa alteração pode resolver seu problema.

Espero ter ajudado.

por Mariana
| 45.6k xp | 49 posts

Fiz este reparo, mas o carrossel ainda não aparece. Agora o console relata este erro:

whos.amung.us/swidget/newapp03.png:1 GET https://whos.amung.us/swidget/newapp03.png net::ERR_BLOCKED_BY_CLIENT

Isto tem a ver com a questão de permissão de aulas passadas?

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Estranho Mariana, aqui eu baixei seu projeto e apenas fiz essa alteração.

Onde você está acessando o projeto? É no seu trabalho?

Precisa ver se não tem nenhum proxy configurado para barrar esse tipo de download.

Verifica também se não pode ser algum anti virus bloqueando a requisição.

Espero ter ajudado.

por Mariana
| 45.6k xp | 49 posts

Obrigada pelo retorno, Matheus,

estou acessando o projeto do meu notebook pessoal, mesmo. Estou usando o navegador Chrome com um adblock instalado. Desliguei-o na aba do projeto e os erros sumiram. Mas os sliders ainda não funcionam. Eles funcionam aí?

solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Mariana, não, aqui não estava funcionando, repare no trecho de código dos slide:

<div class="">
    <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>

Repare que faltou você adicionar a classe .slider para sua div, ficando:

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

Mas, porque a classe slider, vamos olhar seu slider.js:

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

Aqui é onde você procura a classe slider.

Obs: Aqui para mim os slides ficaram sem estilos, faltou importar os arquivos .css so slick:

<link href="slick-1.6.0/slick/slick.css" rel="stylesheet">
<link href="slick-1.6.0/slick/slick-theme.css" rel="stylesheet">

Espero ter ajudado.

por Mariana
| 45.6k xp | 49 posts

Era isso mesmo, Matheus, o meu erro estava em não ter "completado" o html. Fiz o recomendado e deu certo. Obrigada!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Boa Mariana, fico feliz que tenha resolvido o problema.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.