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

slick

Referente ao curso jQuery: avance na biblioteca mais popular do mercado parte 2, no capítulo Plugins do jQuery e atividade Slider com Slick

por Leveditor
| 124.1k xp | 228 posts

boa noite, estou fazendo um site com hmtl css js e bootstrap 4, mas quando vou usar o slick ele da conflito com o bootstrap 4.

quando eu coloco os script do bootstrap 4, o slick começa a da erro , mas quando eu tiro o js do bootstrap 4, o slick começa a funcionar normal, é possível usar os dois sem da erro?

esse é do bootstrap 4

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
5 respostas
por Stefano Akira Saffran
| 171k xp | 30 posts

Bom dia,

não seria melhor usar o carrossel do Bootstrap no lugar?

https://getbootstrap.com/docs/4.3/components/carousel/

por Lucas Peixoto de Alencar Rocha
| 1056.7k xp | 1640 posts
Instrutor Dev

Bom dia,

Eu já utilizei o slick + o bootstrap 4 em vários projetos e sempre funcionou.

Pode mostrar o seu código de quando tentou incluir o slick e o bootstrap juntos?

por Leveditor
| 124.1k xp | 228 posts

esse é meu código

<!DOCTYPE html>
<html>
<head>
    <title>....</title>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Alterna navegação">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(Página atual)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Destaques</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Preços</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Link dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Ação</a>
          <a class="dropdown-item" href="#">Outra ação</a>
          <a class="dropdown-item" href="#">Algo mais aqui</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
 <div class="slider">
            <img src="canada5.jpg" class="imagem-jogo">
            <img src="canada4.jpg" class="imagem-jogo">
            <img src="canada3.jpg" class="imagem-jogo">
        </div>



<script src="jquery.js"></script>

<script src="teste.js"></script>
<script src="slick/slick.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

JS com slick

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

     });
});

por favor de uma olhada no erro que mostra assim que adiciono o script do bootstrap 4

https://github.com/Leveditor/foto

solução!
por Lucas Peixoto de Alencar Rocha
| 1056.7k xp | 1640 posts
Instrutor Dev

Tô vendo no seu código que a ordem dos scripts está trocada.

O slick e o bootstrap dependem do jquery, então o jquery tem que vir antes dos dois.

O seu arquivo teste.js depende do slick e do jquery, então deve vir depois de todos.

E por último tem o detalhe da versão do jquery, o slick precisa da versão completa do jquery, ele não funciona com a versão slim do jquery.

Eu mudei a ordem dos scripts e funcionou aqui, remove a parte dos scripts e deixa como abaixo e verifica se funciona:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="slick/slick.min.js"></script>
<script src="teste.js"></script>
por Leveditor
| 124.1k xp | 228 posts

obrigado