slickjs-autoload using div attr

slickjs-autoloaded.js

jQuery( document ).ready( function() {
	
  /* 
  
  <div data-slick="{...slick json settings}" data-slick-enabled="1" data-slick-flex="inline-flex">...</div>
  
  Recommended css in order to obtain better performance / loading, and the use of inline-flex instead of inline slides:
  
  <style>
  
  // Apply inline-flex, if attribute is set on the slick carousel
  [data-slick][data-slick-flex].slick-initialized .slick-slide {
    display: inline-flex;
    margin: 0 20px;
  }

  // Hide all slides show only first slide, until slick is fully loaded ( avoid element shifts 
  [data-slick]:not(.slick-initialized) > *:not(:first-child) {
    display: none;
  } 

  // Original slick css doesnt contain dots design.
  .slick-dots {
    display: flex;
    justify-content: center;
    column-gap: 15px;
  }

  // Hide dots, if only one
  .slick-dots li:first-child:last-child {
    display: none;
  }

  .slick-dots button {
    border: 1px solid #000;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    margin: 10px 0;
  }

  .slick-dots .slick-active button {
    background: #000;
  }
  </style>
  */
	if ( jQuery( '[data-slick]' ).length ) {
		var slick_version = '1.8.1'; 
		var slicker = function() {
			jQuery( '[data-slick]:not([data-slick-enabled]):not(.slick-initialized), [data-slick][data-slick-enabled="1"]:not(.slick-initialized)' ).slick();
			if ( typeof( window.slicker ) == 'undefined' ) {
				jQuery( window ).on( 'resize overlay:show', function() {
					jQuery( '[data-slick]slick-initialized' ).slick( 'setPosition' );
				} );
			}
			window.slicker = slick_version;
		}
		if ( typeof( jQuery.prototype.slick ) == 'function' ) slicker();
		else {
			jQuery( 'head' ).append( jQuery( '<link>' ).attr( {
				rel:  'stylesheet',
				type: 'text/css',
				href: '//cdn.jsdelivr.net/npm/slick-carousel@' +  slick_version + '/slick/slick.css'
			} ) ) ;
			jQuery.ajax({
				url: '//cdn.jsdelivr.net/npm/slick-carousel@' +  slick_version + '/slick/slick.min.js',
				dataType: 'script',
				success: slicker,
				async: true
			} );
		} 
	}
  
} );