Magento2 RequireJS – Load Tether Before Bootstrap v4

1. Create Your Component

Assuming the path to your component is Briteskies_ProductConfigurator/js/configurator.js, use the contents below. Notice the return function gets a config and element parameter.

The config parameter will contain options that you define when initializing the component from your template.

The element parameter will be a reference to the DOM object you target when initializing the component from your template:

define([
    'jquery',
    'slick'
], function ($) {
    return function(config, element) {
        var speed = config.autoplaySpeed;

        // When document is ready
        $(function () {
            $(element).slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                dots: false,
                autoplay: true,
                autoplaySpeed: speed
            })
        });
    };
});

2. Map Your Component (Make it available to requirejs)

In your module's requirejs-config.js file, define a configurator component and point to its path. I've omitted your other code to see only the changes to be added:

var config = {
    map: {
        "*": {
            configurator: 'Briteskies_ProductConfigurator/js/configurator'
        }
    }
};

3. Initialize Component From Your Template

In the template that will hold the content needing the slick slider, you can target an element and specify which component to use.

The DOM object(s) that the ".main-gallery" key below matches gets passed as the element parameter mentioned in Step 1.

The json object defined after the "configurator" key below gets passed as the config parameter mentioned in Step 1.

Bonus: If you are using your own Block for the template, you could fetch system configuration values and make them available to your component (say for toggling autoplay speed, whether to use arrows, slides to show, etc...):

<script type="text/x-magento-init">
{
     ".main-gallery" : {
        "configurator" : {
            "autoplaySpeed": 5000
        }
     }
}
</script>

I think that you have another problem in your script. you have defined both jquery and datatable as dependencies. But you only pass jquery to the function. The function part of the requirejs script should have the dependency scripts object passed to the function part. try:

<script type="application/javascript">
requirejs(['jquery','dataTable'],function($, dataTable){
    $(document).ready(function(){
        $('#list-table').DataTable();
    });
});

As for the shim part, I think that if you have defined it something like :

var config = {
    map: {
        '*': {
            dataTable: 'Ktpl_Slider/js/datatables.min'
        }
    },
    "shim" {
        "dataTable" : ["jquery"]
    }
};

then it's fine. Looks like it works for me, however, the extra quotes around "shim" are only present in Magento 2 documentation, and not in requirejs documentation. so not sure which one is right.