'Slick slider extra options as data attribute

From documentation the data attribute work like this

data-slick='{"dots": true}'

For this jquery version

$('.one-time').slick({
  dots: true,
});

However for more complex settings how does data attribute should be written?Say

        $('.center').slick({
         dots: true,
         responsive: [
        {
          breakpoint: 768,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 3
          }
        },
        {
          breakpoint: 480,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 1
          }
        }
      ]
    });
custom-data-attributeslick.js


Solution 1:[1]

Just had the same issue, the comment helped, but it didn't work. Found this issue on the github repo : https://github.com/kenwheeler/slick/issues/1857

So your html markup to have data attribute settings to the slick slider would look like this : 

<div class="slick-slider" 
     data-slick="{
         "dots": true,
         "responsive": [
        {
          "breakpoint": 768,
          "settings": {
            "arrows": false,
            "centerMode": true,
            "centerPadding": "40px",
            "slidesToShow": 3
          }
        },
        {
          "breakpoint": 480,
          "settings": {
            "arrows": false,
            "centerMode": true,
            "centerPadding": "40px",
            "slidesToShow": 1
          }
        }
      ]
     }">

     <!-- Slides -->

</div>

Solution 2:[2]

In addition to the above comment by Fabian, no trailing commas are allowed in the json.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mihai
Solution 2 Vilian

Related Questions