Slick plugin hangs when receiving settings

Asked

Viewed 40 times

1

I’m using the Slick plugin to create a simple carousel but the plugin hangs when I insert the settings dynamically, I can’t understand why it’s crashing =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>

javascript

1 answer

0


The problem is that the plugin does not read the values passed as string. For example, you put false in quotes, thus the value is no longer boolean and becomes a string, causing error in the interpretation of the plugin.

Simply remove the values from the quotation marks:

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

Behold:

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

    Wow, I’m almost an hour away from cracking my head, thank you very much!

Browser other questions tagged javascript

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