Slick is not working

Asked

Viewed 453 times

-2

I have the following html code 

   <html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link rel="stylesheet" type="text/css" href="./css/slick.css" />
<link rel="stylesheet" type="text/css" href="./css/slick-theme.css" />
</head>

<body>
<!-- Cabeçalho da página -->
<div class="container">
    <header class="header-container">
        <hr class="container-hr">
        <img class="compasso-logo" src="./assets/logo-compasso.png" alt="logo compasso">
        <p class="header-primeiro-parag">
            < front end />
        </p>
        <p class="header-segundo-parag">
            developer challange
        </p>
    </header>
    <!-- Conteúdo principal -->
    <main class="container-main">
        <p class="main-titulo">produto</p>
        <hr>
        <h2 class="main-h2">conheça um pouco da nossa metodologia para criação de soluções inovadoras</h2>
        <p class="main-parag">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <img class="main-img" src="./assets/bg-section-1.svg" alt="developer">
    </main>
    <!-- Slider de cases -->
    <p class="cases">conheça alguns cases</p>
    <div class="carousel">
        <div><img class="prim-img" src="./assets/logo1.png" alt="drone">
        </div>
        <div><img class="seg-img" src="./assets/logo2.png" alt="keybord">
        </div>
        <div><img class="terc-img" src="./assets/logo3.png" alt="drone">
        </div>
        <div><img class="qua-img" src="./assets/logo4png" alt="keybord">
        </div>
    </div>
</div>
<div class="container-cliente">
    <p class="cliente-area">área do cliente</p>
    <p class="cliente-acesso">acesse nossa plataforma exclusiva</p>
    <div class="container-form">
        <form action="" method="get" class="form-cliente">
            <div class="form-cliente-user">
                <label for="user">Usuário </label>
                <input type="text" name="user" id="user" required>
            </div>
            <div class="form-cliente-senha">
                <label for="senha">Senha </label>
                <input type="senha" name="senha" id="senha" required>
            </div>
            <div class="form-cliente-submit">
                <input type="submit" value="Acessar">
        </form>
    </div>
</div>
<!-- Footer da página -->
<footer class="footer">
    <img class="footer-img" src="./assets/logo.png" alt="logo compasso">
</footer>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="./js/main.js"></script>
</body>

</html>
and the slider code

$('.carousel').slick({
    infinite: true,
    slidesToShow: 4,
    speed: 500,
    slidesToScroll: 4,
    arrows: true
});

but the slider does not work on the page. What may be occurring?

javascript html jquery

  • Missing jquery library in your question

  • @Markvaaz he must have put only the code of the div who wants to do the slide and javascript of the same... It would be nice if he could put in the full code to help you

  • @Angelosoares added the full code to better understand it

  • @PAOLASANTOS is displaying some error in the browser console?

  • @Gutoxavier yes, "main.js:1 Uncaught Typeerror: $(...). Slick is not a Function"

  • 1

    @PAOLASANTOS this seems to be evidence that the library Slick is not accessible, change "./slick/slick.js" all the way from the library.

  • @Gutoxavier changed the path and another error on the console appeared net::ERR_FILE_NOT_FOUND jquery-1.11.0.min. js:3

  • CDN for Slick https://cdnjs.com/libraries/slick-carousel

Show 3 more comments

1 answer

0


I downloaded the Slick , extracts the entire contents in a folder called Slick, I left all the contents in the root of the folder. Follow the code: 

<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link rel="stylesheet" type="text/css" href="slick/slick.css" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
</head>

<body>
<!-- Cabeçalho da página -->
<div class="container">
    <header class="header-container">
        <hr class="container-hr">
        <img class="compasso-logo" src="./assets/logo-compasso.png" alt="logo compasso">
        <p class="header-primeiro-parag">
            < front end />
        </p>
        <p class="header-segundo-parag">
            developer challange
        </p>
    </header>
    <!-- Conteúdo principal -->
    <main class="container-main">
        <p class="main-titulo">produto</p>
        <hr>
        <h2 class="main-h2">conheça um pouco da nossa metodologia para criação de soluções inovadoras</h2>
        <p class="main-parag">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <img class="main-img" src="./assets/bg-section-1.svg" alt="developer">
    </main>
    <!-- Slider de cases -->
    <p class="cases">conheça alguns cases</p>
    <div class="carousel">
        <div><img class="prim-img" src="https://placeimg.com/1000/400/animals" alt="drone">
        </div>
        <div><img class="seg-img" src="https://placeimg.com/1000/400/arch" alt="keybord">
        </div>
        <div><img class="terc-img" src="https://placeimg.com/1000/400/nature" alt="drone">
        </div>
        <div><img class="qua-img" src="https://placeimg.com/1000/400/tech" alt="keybord">
        </div>
    </div>
</div>
<div class="container-cliente">
    <p class="cliente-area">área do cliente</p>
    <p class="cliente-acesso">acesse nossa plataforma exclusiva</p>
    <div class="container-form">
        <form action="" method="get" class="form-cliente">
            <div class="form-cliente-user">
                <label for="user">Usuário </label>
                <input type="text" name="user" id="user" required>
            </div>
            <div class="form-cliente-senha">
                <label for="senha">Senha </label>
                <input type="senha" name="senha" id="senha" required>
            </div>
            <div class="form-cliente-submit">
                <input type="submit" value="Acessar">
        </form>
    </div>
</div>
<!-- Footer da página -->
<footer class="footer">
    <img class="footer-img" src="./assets/logo.png" alt="logo compasso">
</footer>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick/slick.js"></script>
<script>
$('.carousel').slick({
    infinite: true,
    slidesToShow: 1,
    speed: 500,
    slidesToScroll: 4,
    arrows: true
});
</script>
</body>

</html>

Browser other questions tagged javascript html jquery

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