1

Estou usando o plugin slick para criar um carrossel simples porem o plugin trava quando insiro as configurações de forma dinamica, não consigo entender porque esta travando =S

if ($('.fn-slick').length) {
    var items = $('.fn-slick');    
    items.each(function () {
        var config = $(this).data('config');        
        $(this).slick(config);
    });
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" rel="stylesheet"/>

<div class="fn-slick" data-config='{"slidesToShow":"2", "slidesToScroll":"2", "arrows":"false"}'>
 <img src="https://dummyimage.com/600x400/00f/fff">
 <img src="https://dummyimage.com/600x400/00f/fff">
 <img src="https://dummyimage.com/600x400/00f/fff">
 <img src="https://dummyimage.com/600x400/00f/fff">
 <img src="https://dummyimage.com/600x400/00f/fff">
</div>

1 Resposta 1

0

O problema é que o plugin não lê os valores passados como string. Por exemplo, você colocou false entre aspas, com isso o valor deixa de ser booleano e vira uma string, causando erro na interpretação do plugin.

Basta retirar os valores das opções das aspas:

data-config='{"slidesToShow":2, "slidesToScroll":2, "arrows":false}'

Veja:

if ($('.fn-slick').length) {
    var items = $('.fn-slick');    
    items.each(function () {
        var config = $(this).data('config');
        $(this).slick(config);
    });
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" rel="stylesheet"/>

<div class="fn-slick" data-config='{"slidesToShow":2, "slidesToScroll":2, "arrows":false}'>
 <img src="https://dummyimage.com/600x400/00f/fff">
 <img src="https://dummyimage.com/600x400/00f/fff">
 <img src="https://dummyimage.com/600x400/00f/fff">
 <img src="https://dummyimage.com/600x400/00f/fff">
 <img src="https://dummyimage.com/600x400/00f/fff">
</div>

1
  • 1
    nossa, to a quase uma hora quebrando a cabeça, muito obrigado! 12/06/2019 às 14:03

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 .