<div data-bind="scope: 'scope-carousel'">
    <h2 data-bind="text: title"></h2>
    <div class="carousel">
        <div>
            TEST Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci beatae blanditiis cupiditate doloribus ducimus eos fuga harum illo inventore iusto minima molestiae omnis provident quaerat quod reiciendis, sequi temporibus veniam!
        </div>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta hic maxime neque numquam perferendis quis sed? Dolorem ducimus et exercitationem fugiat ipsa iure magni nam, perspiciatis quidem sunt ut, vitae.
        </div>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, sit, voluptatum? Accusantium aspernatur at dolores earum enim excepturi id molestiae molestias nesciunt officia perspiciatis, repudiandae, saepe sed sint ullam veritatis.
        </div>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, sit, voluptatum? Accusantium aspernatur at dolores earum enim excepturi id molestiae molestias nesciunt officia perspiciatis, repudiandae, saepe sed sint ullam veritatis.
        </div>
    </div>
</div>


<script type="text/x-magento-init">
{
    ".carousel": {
        "Magento_Ui/js/core/app": {
            "components": {
                "scope-carousel": {
                    "component": "Magento_Cms/js/carousel",
                    "element": ".carousel",
                    "carouselTitle": "A carousel test"
                }
            }
        }
    }
}
</script>

define(['jquery', 'ko', 'slick', 'domReady!', 'Magento_Ui/js/core/app'], function($, ko) {
    'use strict';


    return function(config, node) {
        console.log(config);
        console.log(node);

        this.title = ko.observable(config.carouselTitle);

        $('.carousel').slick({
            slidesToScroll: 1,
            slidesToShow: 1
        });
    };
});