-1

Estou com um problema: ao subir o site, o meu javascript não rodou. Segue o código fonte.

Este código esta dentro do body

<script type="text/javascript" src=".//js/code.jquery"></script>
<script type="text/javascript" src=".//js/jquery-migrate.js"></script>
<script type="text/javascript" src=".//js/slick.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>

<div class="col-100">
    <div class="slider-principal">
        <img src="./img/slide_1.jpg"/>
        <img src="./img/slide_2.jpg"/>
        <img src="./img/slide_3.jpg"/>
        <img src="./img/slide_4.jpg"/>
        <img src="./img/slide_5.jpg"/>
        <img src="./img/slide_6.jpg"/>
    </div>
</div>

js/main.js

$('.slider-principal').slick({
    dots: true,
    infinite: true,
    speed: 300, /*Velocidade do Slide*/
    slidesToShow: 3, /*Quantidade de slides passando por vez*/
    autoplay: true,
    autoplaySpeed: 3000
});
1

1 Resposta 1

2

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
    });
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .