When climbing the site javascript did not run

Asked

Viewed 32 times

-1

I have a problem: when climbing the site, my javascript did not run. Follow the source code.

This code is inside the 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
});
javascript html

1 answer

2

What’s going on is that when your main.js executes, HTML elements not yet created.

A recommendation is to import <script>'s always at the end of HTML, rather than at the beginning (as you are doing now). For more details, see Where should I put a Javascript code in an HTML document?

Second, you can run your code only when the page has already been loaded:

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

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.