Using js lib inside Portal, "TypeError: $(...).slick is not a function"

Question

When rendering the Portal page, I get this error ..

TypeError: $(...).slick is not a function

The page has access to JQuery, as I can access JQuery functions.
In browser I can see the js is rendered before the pzn footer , so should have access to the slick function.
How come it doesn't?

In pzn header, js lib copy/pasted ..

<script>
/*
     _ _      _       _
 ___| (_) ___| | __  (_)___
/ __| | |/ __| |/ /  | / __|
\__ \ | | (__|   < _ | \__ \
|___/_|_|\___|_|\_(_)/ |___/
                   |__/

 Version: 1.3.15
  Author: Ken Wheeler
 Website: http://kenwheeler.github.io
    Docs: http://kenwheeler.github.io/slick
    Repo: http://github.com/kenwheeler/slick
  Issues: http://github.com/kenwheeler/slick/issues

 */

!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"undefined"!=typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";var b=window.Slick||{}; ..
</script>

<div id="carouselContainer" class="slider multiple-items width"></div>

In pzn footer ..

<script>
$('.multiple-items').slick({
    infinite: false,
    slidesToShow: 5,
    dots: true
});
</script>

Answer 1

IBM Content Template Catalog was causing conflicts. When CTC was disabled, the slick function was available.

In the end, I imported slick.js at the Portal theme level before CTC is initialized i.e in theme_en.html

Answer 2

I was getting this error too. To solve it, I changed my code from:

var $ = require('jquery-browserify');
var slick = require('slick-carousel');

to:

var $ = require('jquery');
var slick = require('slick-carousel');

'jquery' was v2.1.4 whereas 'jquery-browserify' was v1.8.1.