Can i initialize with data attribute setting?

[shakibdshy]

Hi, like OwlCarousel, it is possible to execute this with a Tiny slider:

HTML Outpot

<div class="my-slider" data-nav="false" data-dots='true' data-autoplay='false' data-margin="30" data-responsive='{"0":{"items": "2", "dots": false}, "768":{"items": "3", "dots": false}, "1024":{"items": "4"}}'>
  <div></div>
  <div></div>
  <div></div>
</div>

Jquery Outpot

// OwlCarousel
  var className = document.querySelectorAll(".carousel");

  className.forEach(function (className) {
    var responsive = $(className).data("responsive");
    var dots = $(className).data("dots");
    var items = $(className).data("items");
    var margin = $(className).data("margin");
    var dotsclass = $(className).data("dotsclass");
    var dotclass = $(className).data("dotclass");
    $(className).owlCarousel({
      items: items,
      loop: true,
      margin: margin,
      dots: dots,
      autoplay: autoplay,
      dotsClass: dotsclass,
      dotClass: dotclass,
      navText: [
        '<i class="fas fa-angle-left"></i>',
        '<i class="fas fa-angle-right"></i>',
      ],
      responsive: responsive,
    });
  });

Tiny-slider version : 2.9.3:

[xanisu]

Hi I've just made something on my own, that works in the same way.

You only have to create the data-attr values that are needed to init the tns object.

Here's a working example: https://codepen.io/xanisu/pen/dyOQYdj

The code looks something like this:

HTML

<div data-js="slider" data-js-config="{'container': '.slider-container','navPosition': 'bottom', 'mouseDrag': 'true', 'items':1,'gutter':20, 'controlsText': ['prev','nex'], 'responsive': {'600': {'items':3},'750': {'items':4},'1280': {'items':8,'gutter': 30}}}">
            <ul  class="slider-container">   
              <li><img src="https://placeimg.com/200/150/nature/1"/></li>
              <li><img src="https://placeimg.com/200/150/nature/2"/></li>
              <li><img src="https://placeimg.com/200/150/nature/3"/></li>
              <li><img src="https://placeimg.com/200/150/nature/4"/></li>
              <li><img src="https://placeimg.com/200/150/nature/5"/></li>
              <li><img src="https://placeimg.com/200/150/nature/6"/></li>
              <li><img src="https://placeimg.com/200/150/nature/7"/></li>
              <li><img src="https://placeimg.com/200/150/nature/8"/></li>
              <li><img src="https://placeimg.com/200/150/nature/9"/></li>
              <li><img src="https://placeimg.com/200/150/nature/10"/></li>
              <li><img src="https://placeimg.com/200/150/nature/11"/></li>
              <li><img src="https://placeimg.com/200/150/nature/12"/></li>
              <li><img src="https://placeimg.com/200/150/nature/13"/></li>
              <li><img src="https://placeimg.com/200/150/nature/14"/></li>
              <li><img src="https://placeimg.com/200/150/nature/15"/></li>
          </ul>
      </div>

JAVASCRIPT

function toJSON( str ) {
        try {
          return JSON.parse( str );
        }catch(err) {
          return {};
        }
};

function createSlider($slider) {
  var slider_config = $slider.attr("data-js-config"); 

  // TINY SLIDER: init 
  var thisConfig = toJSON(slider_config.replace(/\'/g, '"'));
  if (window.tns) {                                        
    var tnsSlider = tns(thisConfig);
  }

}

var sliders = $('*[data-js="slider"]');
for (var i=0; i < sliders.length; i++) {
  createSlider($(sliders[i]))
}

[shakibdshy]

@xanisu Thanks