Skip to main content
Adicionar referência a outra questão
Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

O que está acontecendo é que quando o seu main.js executa, os elementos HTML ainda não foram criados.

Uma recomendação é importar os <script>'s sempre ao final do HTML, ao invés de no começo (como você está fazendo agora). Para mais detalhes, veja Onde devo colocar um código JavaScript em um documento HTML?

Em segundo, você pode executar o seu código somente quando a página já tiver sido carregada:

$(document).ready(function() {
    // Isso será executado quando o "document" estiver pronto
    $('.slider-principal').slick({
        dots: true,
        infinite: true,
        speed: 300, /*Velocidade do Slide*/
        slidesToShow: 3, /*Quantidade de slides passando por vez*/
        autoplay: true,
        autoplaySpeed: 3000
    });
});

O que está acontecendo é que quando o seu main.js executa, os elementos HTML ainda não foram criados.

Uma recomendação é importar os <script>'s sempre ao final do HTML, ao invés de no começo (como você está fazendo agora).

Em segundo, você pode executar o seu código somente quando a página já tiver sido carregada:

$(document).ready(function() {
    // Isso será executado quando o "document" estiver pronto
    $('.slider-principal').slick({
        dots: true,
        infinite: true,
        speed: 300, /*Velocidade do Slide*/
        slidesToShow: 3, /*Quantidade de slides passando por vez*/
        autoplay: true,
        autoplaySpeed: 3000
    });
});

O que está acontecendo é que quando o seu main.js executa, os elementos HTML ainda não foram criados.

Uma recomendação é importar os <script>'s sempre ao final do HTML, ao invés de no começo (como você está fazendo agora). Para mais detalhes, veja Onde devo colocar um código JavaScript em um documento HTML?

Em segundo, você pode executar o seu código somente quando a página já tiver sido carregada:

$(document).ready(function() {
    // Isso será executado quando o "document" estiver pronto
    $('.slider-principal').slick({
        dots: true,
        infinite: true,
        speed: 300, /*Velocidade do Slide*/
        slidesToShow: 3, /*Quantidade de slides passando por vez*/
        autoplay: true,
        autoplaySpeed: 3000
    });
});
Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

O que está acontecendo é que quando o seu main.js executa, os elementos HTML ainda não foram criados.

Uma recomendação é importar os <script>'s sempre ao final do HTML, ao invés de no começo (como você está fazendo agora).

Em segundo, você pode executar o seu código somente quando a página já tiver sido carregada:

$(document).ready(function() {
    // Isso será executado quando o "document" estiver pronto
    $('.slider-principal').slick({
        dots: true,
        infinite: true,
        speed: 300, /*Velocidade do Slide*/
        slidesToShow: 3, /*Quantidade de slides passando por vez*/
        autoplay: true,
        autoplaySpeed: 3000
    });
});