title: Slick slider extra options as data attribute
body: <p>From documentation the data attribute work like this</p>
  
  <pre><code>data-slick='{"dots": true}'
  </code></pre>
  
  <p>For this jquery version</p>
  
  <pre><code>$('.one-time').slick({
    dots: true,
  });
  </code></pre>
  
  <p>However for more complex settings how does data attribute should be written?Say</p>
  
  <pre><code>        $('.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
            }
          }
        ]
      });
  </code></pre>